CSS3学习笔记--media query 响应式布局
语法:@media screen and (min-width: 320px) and (max-width : 479px)
media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件(其他关键字还有 not, only,看字面大家能理解,就不多说。),然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。
一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外,就是高像素比的终端,比如 iphone4以上的retina屏,一个iphone5的小小的屏幕(iphone的屏幕是真小啊),他的分辨率竟然达到了1136*640,几乎等于 一个笔记本的分辨率。你在这样小的物理显示界面打开一个网页,他用1136的分辨率来显示,结果就是所有元素小的可怜。
在面对这种分辨率精细的终端,我们有另外一个条件查询语句 device-pixel-ratio。
比如例子里的
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
就是判断终端的像素比是2的话,所渲染的样式。iphone4以上像素比是2,高分辨率Andriod设备像素比是1.5,例子里只有像素比为2的查询,1.5的或者其他比例方法一样,前面用的是几种浏览器的私有属性,最后一种是通用属性。
演示代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>响应式布局</title> <style type="text/css"> div { background: #ccc; width: 100%; height: 400px; border: 2px solid #4183C4; } span { display: block; float: left; background: #007902; color: #fff; line-height: 25px; padding: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #fff; } @media screen and (max-width: 400px) { span { width: 100%; } } @media screen and (min-width: 400px) and (max-width: 800px) { span { width: 50%; } } @media screen and (min-width: 800px) { span { width: 25%; } } </style> <script type="text/javascript"> window.onload = function() { var divCon = document.createElement(‘div‘); var span; for (var i = 0; i < 5; i++) { span = document.createElement(‘span‘); span.innerHTML = "内容块-" + i; divCon.appendChild(span); } document.body.appendChild(divCon); //alert(divCon.offsetWidth); } </script> </head> <body> <h3>如果大于屏幕宽度小于400px就一列显示,400px-800px两列显示,800像素以上四列显示</h3> </body> </html>
相关阅读:移动设备像素比
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。