viewport和rem

移动端尺寸相关	iphone5	含义
css px	320*568	逻辑像素
dp	640*1136	手机屏幕的实际像素尺寸
dpr	2	设备像素缩放比
dpi/ppi	326	单位英寸内的像素密度

公式一：

ppi= 屏幕对角线上的像素点数/对角线长度 = √ （屏幕横向像素点^2 + 屏幕纵向像素点^2）/对角线长度;
以iphone5为例，该屏幕分辨率为640px*1136px，4英寸。则点密度为 √ (640^2 +1136^2) /4 = 326ppi。

ppi越高图像越清晰，可视度越低，系统默认缩放比越大；（如PC图标）

在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

公式二：

设备像素比＝物理像素 / 设备独立像素
css px = dp/dpr

关系图

今日笔记如下：

一、viewport视口

viewport 就是指在移动端上显示网页区域的大小或者说webView的大小它并不等于浏览器可视区域的大小, 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px,为了能在移动设备上正常显示pc网页, 但是这会导致一个问题,浏览器会出现滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

viewport

关于三个viewport的理论

layout viewport (布局视口) 就是浏览器默认的viewport大小 layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取

visual viewport (可视视口) 可以看到的区域大小随用户的缩放而改变 visual viewport的宽度可以通过window.innerWidth 来获取

ideal viewport (理想视口) 最适合布局的视口,跟dpr有关,iphone的ideal viewport 为320,小米4c的为360.

二、利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。

在移动端通常会添加如下标签

< meta name="viewport" content=
"width=device-width,
 initial-scale=1.0, 
maximum-scale=1.0,
 user-scalable=no" >
//width 设置layout viewport 的宽度，
为一个正整数，或字符串"width-device"
//initial-scale 设置页面的初始缩放值，
为一个数字，可以带小数
//minimum-scale 允许用户的最小缩放值， 
为一个数字，可以带小数
//maximum-scale 允许用户的最大缩放值，
为一个数字，可以带小数
//height 设置layout viewport 的高度，
这个属性对我们并不重要，很少使用
//user-scalable 是否允许用户进行缩放，
值为"no"或"yes", no 代表不允许，yes代表允许

这个name为viewport的meta标签到底有哪些东西呢，又都有什么作用呢？
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

把当前的viewport width 设置成 device-width layout viewport 就会和 ideal viewport 宽度相同
要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

如我们通过js设置html的fontSize,

假如获取宽度为320，因为在运算里除以10，根元素的字体大小便为32px；：
在css里我们想设置元素高度为49px
便可写

height:49/32rem;
//当然这样直接写可以借用less或sass等css预编译工具

有些理解的地方希望以后在实践中可以体会到。