移动端适配

像素

• 物理像素：手机设备厂商在生产手机屏幕时的分辨率，比如苹果4S分辨率是 960*640，苹果3S分辨率是480*320
• CSS像素：是一个抽象单位，CSS像素最终会转换成物理像素在手机上显示、
• 设备独立像素：浏览器控制台中模拟手机时的像素
•  

像素比

• 物理像素 / 设备独立像素
• Iphone6 物理像素是 750 * 1334 ，Iphone6设备独立像素是 375 * 667，像素比是2

视口

• 布局视口：大部分默认都是980px，默认布局视口大于屏幕的宽度，布局视口用来控制移动端布局
• 视觉视口：决定用户可以看到的内容

meta标签

•  <meta name="viewport" content="width=device-width" />  将布局视口的宽度修改为设备独立像素的宽度，现在布局视口与视觉视口的高宽一样