移动端页面布局方式，简单记录一下_移动端布局

1、视口

视口就是浏览器显示页面=内容的屏幕区域
视口分为布局视口、视觉视口、理想视口

---

①三种视口介绍
（1）布局视口（了解）

• 用于早期的PC端页面在手机上显示的问题
• 这个视口分辨率设置基本为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

（2）视觉视口（了解）

• 视觉视口就是用户正在看到的网站的区域

（3）理想视口

• 为了使网站在移动端有理想的浏览和阅读宽度而设定
• 理想视口对设备来讲，是最理想的视口尺寸
• 需要手动添加meta视口标签通知浏览器操作

---

②meta视口标签
（1）主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽。
（2）语法：meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

（3）标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

2、多倍图

①物理像素和物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。
• 开发时的1px不是一定等于1个物理像素的
• PC端页面，1px等于1个物理像素的，但是移动端不一定
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
• PC端和早期的手机屏幕：1CSS像素 = 1物理像素的，后来，Retina（视网膜屏幕）一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

---

②多背图

• 对于一张50px*50px的图片，在手机Retina屏幕中打开，按照上面的物理像素比放大倍数，这样会造成图片模糊
• 在标准的viewport设置中，使用倍图来提高图片网站质量，解决在高清设备中的模糊问题。
• 通常使用二倍图，也有3倍图、4倍图…看实际开发
• 背景图片注意缩放问题，例如如果使用二倍图，就要将大一倍的图缩小：
  
  background-size:参数该属性规定背景图片的尺寸
  参数：
  （1）写两个参数：就分别表示宽和高
  （2）只写一个参数，就表示宽，高就省略了
  （3）cover：高宽等比例拉伸，拉伸到完全覆盖盒子位置
  （4）contain：高宽等比例拉伸，当宽度或高度铺满盒子就不再进行拉伸了，可能有空白部分

3、移动端开发选择

①单独制作移动端页面
②响应式兼容PC端

4、移动端技术解决方案

①移动端浏览器基本以webkit内核为主，可以放心使用H5标签和C3样式。

---

②CSS初始化
移动端CSS初始化推荐使用normalize.css/

• 保护了有价值的默认值
• 修复了浏览器的bug
• 是模块化的
• 拥有详细的文档

官网：http://necolas.github.io/normalize.css/

---

③移动端中的盒子模型
在移动端中盒子模型用的是box-sizing，与传统的content-box盒子模型相比，box-sizing中的padding和border不会撑大盒子了

---

④特殊样式

5、移动端常见布局

①单独制作移动端页面

• 流式布局（百分比布局）
• flex弹性布局（强烈推荐）