html5css3响应式布局介绍.docVIP

html5/css3响应式布局介绍 　　html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 　　一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个页面的时候，他会根据几种终端来显示不同的样式，在电脑上是三列，在pad上应该也是 三列，在大屏手机上是三行，在屏幕小于320的手机上只显示主要内容，隐藏掉了次要元素。(这里关于响应式布局还有个比较好的消息，就是拖动浏览器也可以 触发判断条件，测试的时候你不需要去找一堆手机，只要把自己的浏览器窗口缩小到一定尺寸就可以了。) 　　我们认识下media query属性吧。 　　@media screen and (min-width: 320px) and (max-width : 479px) 　　就从这个条件语句开始介绍，media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件(其他关键字还有 not， only，看字面大家能理解，就不多说。)，然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。 　　这个语句，就是响应式布局的基础应用了。在判断终端分辨率大小之后，赋予不同的样式进去，就像我们的例子里 　　@media screen and (max-width : 320px){ 　　body{...} 　　} 　　@media screen and (min-width: 800px) and (max-width: 1024px){ 　　body{...} 　　} 　　至于要判断多少种分辨率，完全取决于你产品的需求，常见的分辨率有手机，平板(注意这些终端是存在 横屏 竖屏 区别的,这个下一篇里提)，桌面显示器。自己为自己所面对的终端定制样式。 　　一般大于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的或者其他比例方法一样，前面用的是几种浏览器的私有属性，最后一种是通用属性， 　　@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) 　　等于 　　@media only screen and (min-device-pixel-ratio: 2) 　　为了一些版本的兼容性，不得已写的长了。 　　body{ 　　font-size:24px; 　　} 　　.box2{ 　　background: url(d/20.png) #ccc; 　　background-size:50%; 　　} 　　在像素比为2的终端里这样写的目的，就是让他显示的更容易识别，一般来说显示一张1px的背景图片，我们要准备一张2px的，然后再background-size:50%这样。1.5像素比同例。 　　比如上面的demo，如果你用iphone4以上的苹果手机来看，中间的背景图片应该是显示“2.0像素比”。 　　这里也暴露了响应式一个很大的缺点：需要多做若干背景图(作为内容显示的图片