视口：　　浏览器显示页面内容的屏幕区域
布局视口：一般移动端设备的浏览器都默认设置了一个布局视口，为了解决早期PC端页面在移动端上的显示问题
视觉视口：
理想视口：是网站在移动设备的浏览器中最理想的状态对设备来说是最理想的尺寸

引入一个meta标签，通知浏览器进行对应操作
meta标签的主要目的就是为了使布局视口的宽度应该与理想视口宽度一致

<meta name="viewport" 视窗
content="width=device-width, 宽度等于当前设备宽度
initial-scale=1, 初始缩放比例
minimum-scale=1, 允许用户缩放到最小的比例
maximum-scale=1, 允许用户缩放到最大的比例
user-scalable=no" 用户是否可以手动缩放，默认否
/>
【注】移动端必须写meta标签，且是禁止用户缩放

 

物理像素：设备所显示的像素（手机截图在PS中量出来的像素大小）
逻辑像素：页面在CSS中书写的像素
物理像素比： dpr=物理像素/逻辑像素

ppi：每英寸所显示像素点的密度
dpi：每英寸所显示像素点的点数

常见设计稿：
设计图：640px dpr 2
　　　　750px dpr 2
　　　　1125px dpr 3
常见单位：
px
em
pt(磅) 多用于安卓
deg
%
rem 　　 跟随html的font-size:;值的大小，默认状态下1rem=16px
vw 　　   视口宽度 width:100vw;占满整个视口宽度,随着视口宽度变化而变化
vh 　　   视口高度 height:100vh;占满整个视口高度,随着视口高度变化而变化
vmax 　  作比较，视口的宽度和高度作比较，谁大按照谁显示
vmin 　　作比较，视口的宽度和高度作比较，谁小按照谁显示

【注】如果使用vw+rem实现页面布局适配
设计图是750px html{font-size:26.67vw;}
设计图是640px html{font-size:31.25vw;}