写在前面
在更多情况下，我们的网页都是针对电脑端设计的，所以对于手机来说，页面的宽度和高度总是大于手机端的，那我们用手机端去访问页面的时候，就会出现横向或者纵向的滚动条，需要用户手动去放大或者缩小，就给用户带来了不好的用户体验。
要在移动设备上进行网页的重构或者开发，那么首先要保证的就是用户在不同设备都能清楚的查看到网页的相关信息并且有一样良好的用户体验，所以不得不说的就是Viewport，只有了解了Viewport的概念及并且弄清楚和Viewport有关的meta标签的使用，就能让网页更好的适配或相应不同分辨率的移动设备。
关于viewport
一个常用的针对移动端网页优化的viewpoint meta标签 大致如下
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width，表示viewport的宽度等于设备的宽度 ，也可以设置一个固定的宽度，比如450px，但是通常情况下不设置固定宽度。
initial-scale=1，表示初始化的缩放比例
maximum-scale=1，表示最大的缩放比例
minimum-scale=1，表示最小的缩放比例
ser-scalable=no ，是否允许用户缩放，默认yes可以缩放。
这行代码就是人们口中所说的完美适口，对于低标准当然可以起到一定作用，但是你以为知道上述这行代码就能达到完美适配了？？说实话，以前我也以为是的，直到查了一些资料，才知道里面还是有很多门道的。
新手、新手、浅谈、浅谈。
除了上述的完美适口的那一行代码，你还要知道的其他知识。
关于像素的单位
px
px：像素是相对于显示器屏幕分辨力而言的相对长度单位，pc端使用px是可以的，但是在移动端，因为手机分辨率种类实在是太多了，如果要是想一个一个去适配，px就苍白很多。
em
em：也是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内的此题尺寸没有人为设置，则相对于浏览器的默认字体尺寸。
注意：
em的值并不是固定的，并且会继承父级元素的字体大小，任意浏览器的默认字体高度都是16px，所有未经调整的浏览器都符合：1em=16px。
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16pxX62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。所以我们在写CSS的时候，需要注意几点：
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 X1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem
rem：rem是css3新增的一个相对单位，也是em的升级版，因为rem相对的只是html根元素，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
一、rem配合viewport
1、这种方式应该是比较常见的，就是在meta标签中，我们写入完美适口，这是需要做的第一步，注意此时我们把initial-scale=1。
2、配合百分比的使用，很多响应式都是借助百分比，这里也是的，在外层盒子标签中，尽量使用百分比来控制。这样对于不同的设备，都能取得良好的比例。
3、对于细节方面，使用rem来校对、比如margin-top：20rem，或者font-size：10rem，这样子不同设备下显示的字体也能取得良好的比例
需要注意的是：px和rem之间的换算问题
因为浏览器html的默认字体大小是16px，如果你没有给根元素指定参照值，那浏览器默认就是 1rem 为 16px。如果设置html｛font-size: 87.5%;｝（也就是 14px）。然后其他的字体就是将你要的值除以 14 得到的值；比如960px；换算成 rem 就是 960/14=68.571428rem，padding 的 24px 也就是 24/14=1.714285rem；
Are you ok？
其实不管ok不ok，这都只是其中一种方法。
二、配合flex布局
1、关于flex弹性布局。弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。前景还是大大的有的。
2、我们可以使用完美适口viewport加上flex布局，不需要太过精确的计算，就能得到很好的效果，当然细节部分要求精细的话建议再配合rem。
3、关于flex布局，可以参考笔者之前写的一篇文章。
《弹性和模型》：http://www.jianshu.com/p/3a5bfee8ad26#
如果您觉得笔者的不够官方，好的，那么官方文档：http://www.runoob.com/w3cnote/flex-grammar.html
三、动态获取viewport
据说手淘就是动态获取viewport，从而来完成响应式设计的，但是因为这笔者接触的不多，所以也不敢造次。但是网上查了几篇文档觉得还是比较有用，分享一下。有兴趣的小伙伴可以看看。
《动态设置viewport的宽高》：http://www.cnblogs.com/webjs/p/3871462.html
《viewport的深入理解》：http://www.cnblogs.com/2050/p/3877280.html
网友评论