移动页面布局基础概念

1:浏览器分为2种：

a:一种是pc端浏览器（谷歌，火狐，IE，欧朋，其他） b:一种是m端浏览器 --移动端浏览器只需要做 -webkit-兼容就行.

pc端页面需要兼容各个浏览器，移动端页面需要兼容各个手机尺寸

2:查看了解手机尺寸

https://uiiiuiii.com/screen/

3:什么是视口？

viewport===视口，视口就是浏览器显示内容的区域。

4:视口的分类：

PC 端：

视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。

移动端

分为三个视口：布局视口、视觉视口和理想视口。（理想视口是我们布局常用的视口）

布局视口（layout viewport） 布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。 但是布局视口的缺点是网页元素在手机上看上去很小，一般默认可以通过手动缩放网页。 视觉视口（visual viewport） 视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 理想视口（ideal viewport） 它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度， 用户无需进行缩放。理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素

5: 理想视口的设置

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> width device-width 定义视口的宽度等于设备的宽度 initial-scale [0-1] 定义初始缩放值 minimum-scale [0-1] 定义放大最大比例 maximum-scale [0-1] 定义缩小最小比例 user-scalable yes / no 定义是否允许用户手动缩放页面，默认值 yes

有几点值得注意：

1：viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的 2：即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放

6: 倍图：

1：一倍图、二倍图、三倍图是移动端处理页面图片的一种图片大小格式。 2：二倍图和三倍图的命名写法 @2x.png / @3x.png 。 3：移动端布局使用二倍图或者三倍图的图片的目的是为了避免图片的失真。

7：分辨率

屏幕分辨率==物理像素 1920*968 解释为：pc端浏览器上可以横着排列1920个像素点，竖着排列968个像素点。 pc端，1px==1个像素。但是移动端他们就不相等。 移动端 1px==2个像素

8: 百分比布局

弹性盒子布局 媒体查询布局（适配多个终端的） bootstarp框架

9: 单位

rem less 媒体查询