viewport rem 基本认识

今天某傻子问我viewport rem的问题，由于太忙，下午才匆忙的给她叨叨了两句，我估计她也是懵的吧，因此，在这复习记录一下这两点知识。

viewport

翻译过来就是 “视区”，简单来说，就是移动端显示网页的区域，或者说是app中webView的大小，它和浏览器可视区域的大小不同，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。一般来说，移动设备上的viewport都是要大于浏览器可视区域的，所以开发时在移动端显示网页经常出现滚动条。
很多资料中都有viewport三个理论的说法:

layout viewport
visual viewport
ideal viewport
这里简单解释一下：
layout viewport: 因为移动设备的屏幕都不是很宽，为PC端浏览器所设计的网页在移动端显示，整改布局就会乱掉，另外css中的1px并不代表屏幕的1px，你分辨率越大，css中1px代表的物理像素就会越多，DPR（devicePixelRatio）的值也越大，因为你分辨率增大了，但屏幕尺寸并没有变大，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清，所以浏览器就决定默认情况下把viewport设为一个较宽的值（比如：980px），这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了，这里浏览器默认的viewport 就叫做布局视区（layout viewport），可以通过document.documentElement.clientWidth 获取到值。

visual viewport: 一般来说，layout viewport 都大于移动端屏幕，而我们在移动端屏幕能看到的区域就叫可视区域（visual viewport），可以通过window.innerWidth 获取到值（部分机型好像不行）。

ideal viewport: 现在很多网站都会为移动设备设计网页，所以需要有一个能完美适配移动设备的viewport，完美适配指：不需要用户缩放和横向滚动条就能正常的查看网站的所有内容、显示的文字大小是合适的，比如一段14px大小的文字，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的，当然其他元素像图片什么的也是一样，这就叫理想视区（ideal viewport）。

我们前端开发中，最爱的就是这ideal viewport ，因为它开发出来的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户，但是要怎么得到ideal viewport呢？在HTML标签中有个meta标签，我们开发移动设备时经常把下面这对代码加入到页面的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
到这里，基本实现了我们需要的 ideal viewport 具体的meta属性请参考这里

rem

说到rem，首先要了解px、em；

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

以上px、em、rem内容来源于菜鸟教程