移动端适配

     在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为， visual viewport（可视视口）和layout viewport（布局视口）。
    通过** <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.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
   设置meta标签的目的：让 visual viewport（可视视口）和  layout viewport（布局视口）大小相等
   设备窗口
       例如（iPhone，iPad ）等，目前都是以iPhone6，7，8作为适配
    布局窗口
       例如（html，body）等的宽度
       **iPhone 6  设备的宽度 --  375px;**
       但在实际开发中我们可以在ps中量取iPhone6的屏幕宽为750px，这就设计到一个**物理像素**和**逻辑像素**
        逻辑像素：：一个物理像素是手机屏幕上最小的物理显示物理单元，在操作系统的调度下，每一个设备都有自己的颜色值和亮度值。
      物理像素：设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
      1px=4ppi
      1个 css像素 （px）   =  4个设备像素 (ppi)
宽是2倍的关系  --- 1个 css像素 的宽  =  2个设备像素 的宽
高是2倍的关系  --- 1个 css像素 的高  =  2个设备像素 的高
dpr =  2