前端自适应

viewport

1.viewport的概念

每一个移动端页面在其背后，都有一个比实际屏幕大的虚拟的视窗，这个虚拟窗口就是viewport，其主要目的就是将完整的页面呈现给用户，如果实际宽度大于移动屏幕的宽度，网页就会横向滚动条。

2.viewport的分类

1）layout viewport——布局视窗

那些为桌面设计的网站也能在移动浏览器上正常显示的宽度

2）visual viewport——视觉视窗

浏览器可视区域的大小

3）ideal viewport——理想视窗

能完美适配移动设备的viewport。即不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，显示的文字的大小是合适的。

CSS像素、、逻辑像素、设备像素比

1.css像素

css是一个不确定的物理像素，它是根据它所在的机型设备而决定的。 

2.逻辑像素

设备独立像素也叫做逻辑像素，与css像素一样是一种虚拟的像素，它是操作系统定义的一种像素单位，应用程序将设备独立设备告诉操作系统，操作系统再将独立设备像素转为设备像素。

3.设备像素

显示屏是由无数个物理像素点组成的，通过控制每个像素点的颜色，从而可以在屏幕上显示不同的图案，设备像素是固定不变的。

设备像素与CSS像素之间的关系

设备像素比 = 设备像素/CSS像素

  rem

rem是相对于html根元素进行设定，一般html默认字体大小是16px,如果想要设置12px的字体大小也就是12px/16px = 0.75rem。