移动Web-02-视口设置和像素

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)： 手机分辨率（物理像素）/开发尺寸(逻辑像素)