01-移动端适配

通过meta标签来设计网页视口

viewport：视口 ，手机网页的大小 content:视口的内容 width=device-width; 网页的宽度和设备的宽度一致 initial-scale=1.0; 默认尺寸缩放比例为1 user-scalable=no; 禁止用户缩放 移动端必须写,否则响应式布局会有影响

vw和vh单位

vw : 视口宽度百分之一 1vw = %1视口宽度 vh : 视口高度百分之一 1vh = 1%视口高度 vmin: 视口最小值的百分之一 vmax：视口最大值百分之一 竖屏： 1vmin = 1vw 1vmax = 1vh 横屏: 1vim = 1vh 1vmax = 1vw

02-像素

1.手机屏幕尺寸及ppi 手机屏幕的尺寸一般是采取手机对角线的长度(单位是英寸，1英寸=2.54厘米)作为手机屏幕的尺寸. ppi的参数指的是手机每英寸包含的像素点，这个像素指的是物理像素，ppi越大，手机的像素密度越高.

2.物理像素(设备像素Device Pixel**、分辨率)** 指的是手机屏幕设备的像素点(代码无法修改)

3.逻辑像素(设备独立像素Device Independent Pixel**、css像素)** 代表可以通过程序控制使用的虚拟像素

4.手机分辨率、开发尺寸、倍率(设备像素比) 手机分辨率：指的就是手机在水平和垂直方向的物理像素点个数 开发尺寸:指的是手机在水平和垂直方向的显示逻辑像素的个数 倍率DPR(devicePixelRatio)： 手机分辨率（物理像素）/开发尺寸(逻辑像素)