这两天看到了一篇关于详解viewport的文章——《viewport双城记》 学到了很多东西，下面来总结下： 像素我认为像素大体分为两类（无论是pc还是移动端）：设备像素（物理像素）和CSS像素（
这两天看到了一篇关于详解viewport的文章——《viewport双城记》
学到了很多东西，下面来总结下：
像素
我认为像素大体分为两类（无论是pc还是移动端）：设备像素（物理像素）和CSS像素（与设备像素存在一定的映射转化关系）
如上两图所示，浅蓝色代表css像素，深蓝色代表设备像素。当界面缩放时设备像素并不会改变，但css像素就会改变，使一个设备像素块上拥有更多CSS像素
PC上获取可用的像素
在我们做网页设计的时候，往往并不关心设备的像素有多大，而是有多少CSS像素提供显示
screen.width/height
含义:用户的屏幕的完整大小 度量:设备的pixels
兼容性问题:IE8里,不管使用IE7模式还是IE8模式,都以CSS的pixels来度量
window.innerWidth/Height
含义:包含滚动条尺寸的浏览器完整尺寸 度量:CSS的pixels
兼容性问题:IE不支持,Opera用设备pixels来度量
document.documentElement.clientWidth/Height 含义：获取viewport的尺寸（不包含滚动条）
度量：css的pixels
兼容性问题：无
document. documentElement. offsetWidth/Height
含义:<html>的尺寸
度量:CSS的pixels兼容性问题:IE用这个值标示viewport的尺寸而非<html>
3. 移动设备的像素
两种viewport
虚拟的viewport ：visualviewport
布局的viewport：layoutviewport
想象下layoutviewport是一张大的不能改变大小和角度的图片。现在你有个更小的框来观看
这张大图片,这个框被不透明的材料包围,因而你只能看到大图片的一部分。你通过这个框 子看到的大图片的部分被称为虚拟viewport(visual viewport)。你能拿着这个框站得离大图片 远点(用户的缩小页面功能),以一次性看到这个大图片。或者你能站得近点(用户的放大 页面功能)以看到一部分。你能改变这个框子的方向,但这张大图片的大小和形状都不会改 变。
但是CSS 布局,特别是感性的宽度(percentual widths)通常是按照layoutviewport来
定义,而比visualviewport宽很多
然而<html>元素的宽度继承于layoutviewport,你的CSS应预先准备着需要处理的屏幕
(layoutviewport)是不是远远超过手机屏幕宽度。这用以保证你的网站外观特性而恰如
在桌面浏览器上一样layoutviewport到底有多宽?每个浏览器都不同。iPhone上的Safari使用980px、Opera 850px,安卓的Webkit核心800px,IE974px。
document. documentElement. clientWidth/Height
含义:layoutviewport尺寸
度量:CSS的pixels
完整支持:Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyre, Obigo问题:在Iris上它标示visualvieport
三星的Webkit核心浏览器,仅当在页面上写入<meta viewport>标签,才正确表 示。否则就代表着<html>的尺寸
FireFox以设备的pixels来度量
IE返回1024 x 768 px,而准确的尺寸保存在document.body.clientWidth/Height NetFront仅当100%缩放时候才正确 塞班的Webkit1(在S60v3设备)不支持这些属性
不支持:黑莓
window.innerWidth/Height
含义:visualviewport尺寸
度量:CSS的pixels
完整支持:iPhone, Symbian, BlackBerry问题:
FireFox和Opera以设备的pixels返回该数值
Android, Bolt, MicroB, 和 NetFront 以CSS的pixels返回该数值,且 为layoutviewport的值
不支持:
IE,它使用document. documentElement. offsetWidh/Height来表示
三星的Webkit核心浏览器,仅当在页面上写入<meta viewport>标签,才正确表
示。否则就代表着<html>的尺寸 混乱:Iris, Skyre, Obigo返回的值不知所云
4. 跨终端的viewport
320px定宽
<meta name="viewport" content="width=320">;最初这是Apple的 一个html扩展标签,但被许多浏览器复用,意义是设置layoutviewport的宽度。
设置页面的width，也就是设置了html容器的宽度，使界面在各个移动设备上以比较友好的样式布局。方法简单
缺点：对于现在越来越泛滥的大屏手机，320的宽度显然并不能给以用户良好的体验。
响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
简单来说，响应式布局下的网页就像是一辆汽车，而viewport的width就是变速器。比如：假设width大于200小于320时时汽车挂1档（界面以方式1展示），大于320小于500时汽车挂2档（界面以方式2展开）。。。。。。。
但是不得不说，在当今移动设备井喷式发展的情况下。要想做到更多的自适应，响应式布局的工作量会越来越大，并且DOM和javascript的大量冗余会大大降低网站的效率
CSS3 Flex布局
Flex弹性布局推荐大家看看大漠翻译的《Flexbox — fast track to layout nirvana?》 链接：http://www.w3cplus.com/css3/flexbox-basics.html
REM布局
rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
rem如何布局？
知道了rem的特性后我们很容易能想到，如果我们整个网站的各个元素的尺寸都以rem为单位来设置。我们只需要指定html根元素的font－size的大小就能控制整个网站的大小，并且各个元素之间相对的比例固定，非常方便。
html{font-size:20px;}.btn {width: 6rem;height: 3rem;line-height: 3rem;font-size: 1.2rem;display: inline-block;background:#06c;color:#fff;border-radius: .5rem;text-decoration: none;text-align: center;}根据规则，我们很容易推算出：.btn类的width＝6*20px＝120px height＝3*20px＝60px .......................
换而言之，我们只要确定好各个子元素与根元素之间的比例，当界面在不懂的设备展示时，只需要根据设备的viewport来调整html的font－size即可找到合适的layoutviewport宽度
