移动端适配

视口:
就是浏览器显示页面内容的屏幕区域
视口分为: 布局视口 视觉视口 理想视口
布局视口:
一般移动端设备的浏览器都默认设置了一个布局视口,为了解决早期pc端页面在移动端上的显示问题
苹果 安卓 基本上设置这个视口的分辨率980px
视觉视口:
你看到的网页区域,指的是网址的区域
通过缩放去操作视觉视口不会影响布局视口

		理想视口:
			1: 是网站在移动设备的浏览器中最理想的一状态(浏览和阅读宽度设定的)
			2: 对设备来说就是最理想的尺寸
			3: 引入一个meta标签,通知浏览器进行对应的操作
			4: meta标签的主要目的就是为了使布局视口的宽度应该与理想窗口的宽度一致,就是设备有多宽,布局视口就有多宽
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
			width=device-width 当前的宽度与当前设备的宽度一致
			initial-scale=1  初始的缩放比例(默认为1)
			minimum-scale=1 允许用户缩放到的最小比例(默认为1)
			maximum-scale=1 允许用户缩放到的最大比例(默认为1)
			user-scalable=no 用户是否可以手动缩放(默认不允许) 因为我们不希望用户去放大缩小页面
			注意: 移动端必须写meta标签,且是禁止用户缩放
		视口缩放:
		
		在375px的设备中截图出来 到ps 中测量是750px
		在ps中值比 设备中的px值大一倍
		
		物理像素:
			1:指的就是屏幕像是的最小的点,是真实存在,设备厂商在生产设备是就已经固定好了的,比如苹果678 750*1334
			
			2: 视网膜高清显示屏,retina显示屏,作用是把更多的物理像素点压缩至一块屏幕里,像素点越密集,看得越清晰,达到更高的分辨,提高画质
			
	了解: ppi: 每英寸所显示的像素点的密度
		  dpi: 每英寸所显示的像素点的点数
	
	重点:
		物理像素比: dpr = 物理像素 / 逻辑像素
			物理像素:就是设备所显示的像素(手机截图 在ps中量取出来的像素大小)
			逻辑像素: 页面在css中书写的像素
			
	常见的设计稿:
		设计图 640px		dpr	2	320
			  750px		dpr	2   375
			  1125px	dpr	3	
			  
	常见的单位:
		px
		em
		pt(磅) 更多应用于安卓设置
		deg	角度
		%
		
		rem: 跟随html的font-size:;值的大小
			  默认状态下 1rem = 16px

1: 这里的font-size不是为了控制页面的文本大小
2: 给html设置font-size,是为了给rem确定比例
1rem = 100px
1rem = 200px
1rem = 300px
1rem = 400px
1rem = 16px
3: 设置这个比值是为了方便计算

		vw:	视口的宽度   width:100vw;  占满整个视口的宽度
			能够随着视口的宽度变化而变化
			100vw = 满屏 = 320px
			100vw = 满屏 = 375px

使用vw是为了让元素的大小能受到屏幕大小的变化而控制
让整体使用rem的单位,跟随html中font-size的设置

		640设计图:
		100vw = 满屏 = 320px
			1vw = 3.2px
			?vw = 100px
			100/3.2 = 31.25vw 
			得出 31.25vw = 100px
		
		750设计图
		100vw = 满屏 = 375px
			100vw = 375px
			1vw = 3.75px
			?vw = 100px
			100/3.75 26.66666666.....
			得出 26.67 = 100px
			
			假设 1rem = 120px
			1vw = 3.75px
			?vw = 120px
			120/3.75= 32vw
			得出 32vw = 120px
			
	记住:
	 如果使用vw + rem实现页面布局适配
	 	设计图是750px html{font-size:26.67vw;}
	 	设计图是640px html{font-size:31.25vw;}
			
		vh: 视口的高度 height:100vh; 占满整个视口的高度
			能够随着视口的高度变化而变化
			
		vmin: 作比较, 窗口的宽高谁小,谁小就按照谁显示
		vmax: 作比较, 窗口宽高谁大,谁大就按照谁显示