移动端屏幕适配——中篇

继上文说了以拉钩网为例的方案之后，这次我们来解释几个名词概念，可以更好地理解响应式布局。

• 布局视口（layout viewport）可以看做事html元素的上一级容器即顶级容器，默认情况或者将html元素的width属性设为100%时，会沾满这个顶级容器，此时用：document.documentElement.clientWidth获取到html元素布局宽度也就是布局视口的宽度，使用媒体查询时max-width和min-width的值指的也是布局视口的宽。

tips:针对各个分辨率范围在html上设置font-size的代码：html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}@media screen and (min-width:800px){html{font-size:25px}}

在实际项目中，把与元素尺寸有关的css，如width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。举例来说，网页有一个.item类，设置了width为3.4rem，该类在不同分辨率下对应的实际宽度如下：

321px <= device-width <= 375px，font-size:11px        --->  .item的width：34px376px <= device-width <= 414px，font-size:12px        --->  .item的width：37.4px415px <= device-width <= 639px，font-size:15px        --->  .item的width：40.8px640px <= device-width <= 719px，font-size:20px        --->  .item的width：51px720px <= device-width <= 749px，font-size:22.5px      --->  .item的width：76.5px750px <= device-width <= 799px，font-size:23.5px      --->  .item的width：79.8999999px800px <= device-width         ，font-size:25px        --->  .item的width：85px

• 布局视口的宽度和高度单位是像素px，这个单位是CSS和JS中使用的抽象单位，为了便于区分称作CSS像素。布局视口的宽度有一个默认值，一般在 768px ~ 1024px 之间，最常见的宽度是 980px，在这个默认值下进行布局得到的页面比较接近PC端布局的效果。
• 可视视口（visual viewport） 是指用户可见页面区域，其宽度值为横向可见CSS像素数，从另一个角度理解，可视视口的宽度决定了将屏幕横向分为多少份，每份对应一个CSS像素，使用window.innerWidth可以获取到可视视口的宽度。
• 理想视口（ideal viewport）（有些网站又叫做完美视口） 是一个比较适合页面布局使用的视口尺寸，作为计算布局视口和可视视口尺寸时的一个基准值，下面代码中 device-width 的值就是理想视口的宽度<meta name="viewport" content="width=device-width">使用screen.width也可以获取到理想视口的宽度。
• 三个视口中 只有理想视口的尺寸是不能改变 的，由设备和浏览器决定，与设备的物理像素数存在着比例关系，这个比例就是 设备像素比 （device pixel ratio， dpr），即有 设备像素比 = 物理像素数 / 理想视口尺寸 ，举例iphone5屏幕横向有640个物理像素，其理想视口宽为320，则 dpr=2，可以使用window.devicePixelRatio获得dpr，但在安卓系统下这个值可能不符合预期。
• 可视视口的尺寸收到缩放比例的影响 ，因此用户手动缩放和在 meta 标签中设置 initial-scale 的值都会改变可视视口的尺寸，可视视口的尺寸越小即显示的CSS像素数越少，则单位CSS像素对应的可使区域越大，对应的缩放比也就越大。 缩放比例是相对于理想视口而言的 ，即有 缩放比例 = 理想视口尺寸 / 可视视口尺寸 。对iphone5，设置<meta name="viewport" content="initial-scale=0.5">则其可视视口尺寸为640个CSS像素缩放比例也有默认的值，没有设置 initial-scale 时，浏览器会取适当的缩放比例使 布局视口正好铺满屏幕即有 布局视口尺寸 = 可视视口尺寸
• 布局视口的宽度受到 meta 标签中的 width 和 initial-scale 的影响
  仅设置 width 的值时，这个值就是布局视口的宽度 ，width的值可以为正整数或特殊值 device-width<meta name="viewport" content="width=400">此时由于没有禁用缩放，一般可以通过双击屏幕对页面进行缩放，但手动缩放不会影响布局适口的尺寸，只会影响到可视视口的尺寸，而且可能导致布局视口小于可视视口设置 initial-scale 的值时，布局视口的尺寸与可视视口的计算方式相同，但不受手动缩放的影响同时设置 width 和 intial-scale 的值时，布局视口的宽取上述两个值中较大的一个
• 布局视口宽 = 可视视口宽时 html 元素正好横向铺满窗口（但其后代元素若有横向 overflow 的情况，仍然会出现滚动条），布局视口宽 > 可视视口宽时，出现横向滚动条

由上述定义，我们可以得到一些结论：

1. 将 meta 标签中的 width 设为 device-width 同时禁用手动缩放可以使 布局视口尺寸 = 可视视口尺寸 = 理想视口尺寸 ，此时 设备像素比 = 物理像素数 / 理想视口尺寸 = 物理像素数 / 布局视口尺寸 ，对iphone5，一个CSS像素对应4个物理像素
2. 为 initial-scale 设置任意合法的值同时禁用手动缩放就可以使 布局视口尺寸 = 可视视口尺寸
3. 将 initial-scale 设置为 1 也可以使 布局视口尺寸 = 可视视口尺寸 = 理想视口尺寸

文章参考自：
http://www.open-open.com/lib/view/open1487142261313.html
http://www.codeceo.com/article/font-size-web-design.html