css3-自适应页面的实现（响应式设计、响应不同类型设备）、浏览器适配

一、头部信息

<meta name="viewport" content="width=device-width,initial-scale=1.0>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

1、viewport 设备屏幕上的可视区域------指定用户是否可以缩放web页面

      user-scalable：是否允许用户缩放

      initial-scale：页面的初始缩放  与width=device-width同用（ideal viewport）  当前缩放值 = ideal viewport宽度  / visual viewport宽度

2、css1像素=电脑屏幕上1个物理像素

     在手机屏幕中css中的1个像素=2个物理像素（移动设备的屏幕像素密度越来越高）

     devicePixelRatio = 物理像素 / 独立像素，css中的是独立像素

     1920*1080  401dpi  （iPhone6 plus）

     target-densitydpi（安卓设置它的像素密度，但是决定废弃）</