博客

一、设置视口 viewport
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		布局视口：css作用的看不到的区域，一般情况下宽度为980
		可视视口：设备的宽度所形成的可以看得见的区域
		完美视口：将布局视口和可视视口的值设置成一样 width=device-width
		initial-scale=1  初始缩放比例为1(不缩放)
		minimum-scale=1 最小缩放 
		maximum-scale=1 最大缩放
		user-scalable=no 不允许用户缩放

    二、手机参数
		设备像素比(dpr) = 物理像素(ps量取)/逻辑像素(css设置的值)
			当前的设计图宽度是 320  dpr=1
			当前的设计图宽度是 640/750 dpr=2
			当前的设计图宽度是 >750  / 1080 dpr=3 
		dpr: 因为超视网膜高清屏的出现，导致了从ps量取的值和设备本身的宽度值是不一样的，所以出现了差值，需要根据dpr，计算出css应该设置的值(pc端是量多少写多少)

	三、	变化的单位
		1. 百分数
		2. em单位 默认1em=16px  跟随当前元素的字体大小 如 font-size:20px; 2em=40px;
		3. rem单位 默认1rem=16px  跟随是根元素html的字体大小 html{font-size:30px} ->1rem=30px  3rem=90px,一般情况下将根元素的字体大小设置为100px
		4. vw(视口宽)、vh(视口高)
			1vw = 视口宽度的1%   量取宽度为 1080px  1vw = 10.8px
			10vw = 视口宽度10%
			100vw = 视口宽度100%
			1vh = 视口高度的1% 10vh = 视口高度的10%  100vh = 视口高度的100% 

四、单位的转换(将根元素里面px单位换成vw单位)
	设计图宽度为750  意味着 设备宽度为 375px
		1rem = 100px;
		100vw =  375px
		1rem = 26.667vw
	设计图宽度1242  意味着 设备宽度为414
		1rem = 100px
		100vw = 414px
		1rem = 24.155vw
	最后将计算出来的值设置为根元素的字体大小