码迷,mamicode.com
首页 > Web开发 > 详细

html5晋级之路-响应式布局基本实现

时间:2015-08-19 19:37:55      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

1.css中的Media Query(媒介查询):

  设备宽高: device-width,device-height

  渲染窗口的宽和高:width,height

  设备手持方向:orientation

  设备的分辨率:resolution

2.使用方法:

   外联

   内嵌样式

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件测试</title>
<link rel="stylesheet" href="js.css" type="text/css" media="only screen and (max-width:640px)">
</head>
<style>
@media screen and (min-width:640px){
body{
background-color:#0FC;
}
}
</style>
<body>
</body>
</html>

如上的两种方法 only screen and(max-width:640)这个最大宽度为640的时候执行,也就是说小于640

@media screen and (min-width:640px)同理大于640;

html5晋级之路-响应式布局基本实现

标签:

原文地址:http://www.cnblogs.com/fanxinguu/p/4742761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!