移动端布局

一.移动端特点

(1)移动端网页和PC端网页不同点

1.移动端:

• 手机屏幕 小 ， 网页宽度多数为 100%， 是适配手机屏幕宽度
• 移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

2.移动端:

• 屏幕 大 ，网页 固定版心
• PC端浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）

(2)分辨率

1.屏幕尺寸:

指的是屏幕 对角线 的长度，一般用 英寸 来度量

2.硬件分辨率:

• 硬件分辨率（屏幕出厂设置） 这种分辨率我们称为物理分辨率，不可更改。
• 物理分辨率越大，显示的图片会约清晰。

3.逻辑分辨率:

• 软件 可以达到的
• 我们平时开发时候的像素单位是 逻辑分辨率，比如 border： 1px solid pink；

4.PC端中逻辑分辨率与物理分辨率的关系:

• 1逻辑分辨率 = 1物理分辨率
• 制作网页参考逻辑分辨率

(3)视口

1.布局视口

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

2.视觉视口

• 字面意思，它是用户正在看到的网站的区域。 注意：是网站的区域。

• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

3.理想视口

•