ui培训媒体查询-响应式网页制作教程（二）

更新时间:2016年05月06日16时19分来源:乐鱼播客UI培训学院浏览次数:

二、视口

2.1 视口的意思

用JavaScript语句：

document.documentElement.clientWidth;

可以轻松输出，当前浏览器宽度

iPhone认为自己的屏幕宽度是980px。

980px是什么呢？是iPhone的分辨率么？不是！实际上就是苹果公司，人为制定的一个参数，
“视口”。

苹果的设计人员人为，苹果手机如果自己认为自己是980px像素的话，那么将能够更好的再手机中显示PC网站，因为绝大多数世界上的网站的版心，都是980px左右。
简单的说，在浏览网页的时候，苹果手机认为自己是980px宽的。

苹果手机，明明屏幕那么�。臼裁醋约�980px宽呢？？�。。�
各大手机厂商，开始运行程序员设置手机自己的视口。我们可以规范手机的视口不是默认的那个值。

2.2 约束视口

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />

一个name属性和id属性都是viewport (视口)的meta标签，就是约束视口标签。
我们通过content属性，来进行视口限制。

width=device-width, → 设置这个视口的宽度，变为设备的宽度（苹果变为了320）
initial-scale=1.0, → 设置视口的初始的缩放倍数为1.0倍
minimum-scale=1.0, → 设置视口的最小的缩放倍数为1.0倍
maximum-scale=1.0, → 设置视口的最大的缩放倍数为1.0倍
user-scalable=no → 设置视口不可以被用户缩放

实际上，苹果的设备宽度也不是320px，这里的320px，到底是怎么出现的呢？实际上这叫做设备的“像素密度无关尺寸”。
苹果设备，在约束视口之后的宽度就是320px。

制作手机网页的时候，一定要约束视口�。》裨蛳煊κ绞�。

我们还要熟知一些常见设备在约束视口之后，的尺寸：
iPhone(3及以后版本): 竖向320px 横向568px
iPad：竖向768px 横向1024px
iPad mini：竖向768px 横向1024px
三星Note3： 540px
三星 Galaxy S系列的：360px;

只能手机的视口（约束之后），一般都是320~360px之间。
各种pad在约束视口之后，都是620~768之间。

上面的数据非常有意义�。�
可以为我们的CSS媒体查询的突变点，提供理论参考。

● 当用户设备宽度大于980的时候，用PC界面；
● 当用户设备宽度在620~979之间，用Pad界面；
● 当用户设备宽度小于619的时候，用手机界面。

也就是说，响应式布局，不是什么新的技术，而是原有的一些技术的组合：流式布局（用百分比写width、padding、margin）、媒体查询（让css能够根据浏览器宽度来选择是否被使用）

本文版权归乐鱼播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：乐鱼播客UI培训学院
首发：http://www.itcast.cn/ui

上一篇：ui培训媒体查询-响应式网页制作教程（一） 下一篇：UI培训-css3小球制作圆环制作