day18（移动端 前置条件 rem+vm）

一.移动端
1.meta视口标签

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

2.标准的viewport设置

1）视口宽度和设备保持一致 width=device-width
2）视口的默认缩放比例1.0 initial-scale=1.0
3）不允许用户自行缩放 user-scalable=no
4）最大允许的缩放比例1.0 maximum-scale=1.0
5）最小允许的缩放比例1.0 minimum-scale=1.0

3.多倍图

我们需要一个50✖50像素（CSS像素）的图片，直接放到iphone8里面会放大2倍：100×100 
我们采取的是放一个100*100的图片 然后手动的把这个图片缩小为50*50（CSS像素）
所以准备图片的时候，我们准备比我们实际需要的大小大2倍的图片，这种方式就是2倍图 
简单来说就是一张100*100的图，在CSS里缩小为50*50，然后放到iphone8移动端会显示成100*100，这样相对于原图来说就没有变大 

4.移动端

如何写一份代码，其他尺寸的设备等比例缩小或者放大
	1.通过多媒体+rem,所有的单位全都用rem实现，
	2.通过多媒体修改html的font-size
	如何将测量的物理像素转为css像素，单位为rem
	        css像素 = 物理像素(通过ps量的)/dpr/font-size的大小
	        320 --- font-size 12px
	        375 --- 14px
	        414 --- 16px 

二.前置条件

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
	li{
    list-style: none;
    }
	a{
    text-decoration: none;
    }
	html,body{
            height: 100%;
            }

三.rem+vw
Retina屏、物理像素、设备独立像素、设备像素比

Retina屏：

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

物理像素：

物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示
单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的
是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显
示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在二倍Retina屏幕下，1个
CSS像素对应的却是4个物理像素

设备独立像素：

设备独立像素是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精
确度量Web页面上的内容。

设备像素比:

设备像素比简称为dpr，物理像素与设备独立像素的比例。
当这个比率为1:1时，使用1个设备像素显示1个css像素。当这个比率为2:1=2时，使用4(2*2)
个设备像素显示1个css像素。当这个比率为3:1=3，使用9(3*3)个设备像素显示1个css像素。

rem和vm的区别

1）rem是一个动态单位，它的大小跟随html的font-size大小改变而改变，它与em不同，em是
跟随父级元素的font-size大小而改变的，而rem不跟随父级元素的font-size大小而改变的
	html{
	    font-size:100px;
	}
	 
	p{
	    font-size:0.2rem;//此处的0.2rem等于0.2*100 = 20px
	}
2) vw和vh也是一个动态单位，他们相对的是一个网页可视窗口的单位；1:100的关系，如果我
 们设置1vw也就是可视窗口宽的百分之一，1vh是可视窗口高度的百分之一，这就像是百分比布
 局，但它们不同的是，百分比相对于的是父级，而vw,vh相对的只是浏览器的可视窗口
	 div{
	    width:100vw;
	    height:100vh;
	    background:red;
	    // 这样设置毫无疑问div充满的整个窗口
	}