关于移动端布局的总结

布局视口

在移动端，在默认情况下，布局视口的宽度是远远大于浏览器的宽度。
两个视口是独立存在的，这也很好的解释了为什么对一个网页不进行移动端适配的情况下，用户进行阅读的时候，如果默认情况下布局视口的宽度等于浏览器宽度，那是不是展示起来更加的不友好。也就是说，如果一个 div的宽度为20%，那么它在布局视口宽度为 980px的时候，展示给用户的像素还有196px，而如果宽度只有 375px的情况下，宽度只有 75px，展示的大小相差特别大。

浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在768px ～ 1024px之间，最常见的是980px

视觉视口

指的是用户看到在网页区域内CSS像素的数量
在移动端：视觉视口越小，屏幕覆盖的css像素更多
在PC端：与移动端相反

理想视口

苹果引入，是对设备来说最理想的布局视口尺寸

<meta name ="viewport" content="width=device-width">

为了处理IE问题

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