CSS--移动端布局

基本概念

背景：

因为手机的尺寸和屏幕的像素越来越大，导致我们响应式布局很难保证网页能够100%适配主流的屏幕

概念：

使用css3的单位以及弹性布局等技术来实现移动端布局。一般移动端布局跟pc端是完全不一样的。

屏幕像素

逻辑像素：

真正用于显示屏幕内容的像素

设备物理像素：

是屏幕一出场已经确定的像素

逻辑像素和设备物理像素：

设备物理像素是指屏幕的实际像素有多少。但现在的手机屏幕一般物理像素都是1920*1080或者2k或更高。但如果一个设备物理像素等于一个逻辑像素（css px），会导致1920px内容挤在手机屏幕里，无法查看，所以才使用逻辑像素来显示页面

常见逻辑像素（移动端页面宽高）：

iPhone：375和414

320（少数）

android：360

414

480

视口（viewport）

概念：

视口即手机屏幕上用于显示页面的那块区域。同时HTML可以利用标签来控制网页在手机屏幕的展示方式。

手机网页展示分类：

• 布局视口：

pc端是什么样，手机就是什么样。在移动端，会将pc端的所有内容都挤在手机屏幕里。内容极度挤压无法看清。

• 理想视口：

按照手机的逻辑像素进行页面布局(一个逻辑像素=一个css像素）。

需要手动配置。

在中添加以下一句代码，开启理想视口。

• 视觉视口

移动端常用单位

px：

绝对长度度量单位。

em：

相对度量单位，是跟当前标签的font-size有关。如font-size=14px，1em=14px。如果当前标签没有设置font-size，那么就找父元素的font-size，直到浏览器默认大小为止。ie全系支持。

rem：

直接以根标签（html）的font-size作为参考，如果HTML没有设置font-size，那么直接参考浏览器的默认大小。ie8不支持。

vw：

也是一个相对单位，指的是设备的视口宽度。1vw=视口宽度的1%，ie8不支持。

vh：

也是一个相对单位，指的是设备的视口高度。1vh=视口高度的1%

单位选择：

1. rem是用font-size来设置大小，所有更适合于文字大小的自适应。
2. vw和vh是相对于视口来处理，所以可以用来设置盒子的尺寸（width和height、margin、padding）
3. vw、vh因为是视口大小，没有大小限制，所以在宽高限制上还是要配合min-width和min-height来一起使用
4. 一般针对于移动端，盒子的宽高会使用vw，因为一般手机的宽度不会相差很大，但高度差距比较明显

移动端兼容性

移动端页面实际参考的尺寸即该手机的逻辑像素

每个手机的逻辑像素不同，导致页面存在宽度不同，即页面宽度存在兼容性问题。

移动端实战

原理：

以手机的逻辑像素为页面宽度，进行页面布局，而我们称这种针对移动端的布局方式叫移动端布局。

适配移动端主流逻辑像素：

iPhone：320 375 414 480 android：360 ipad：768 1024 pc：992

一般步骤

• 需保证页面使用的是理想视口，能够保证我们是以逻辑像素来进行布局

移动端解决方案：

rem+弹性布局（或rem+流式布局）：

• 原理：利用屏幕的宽度不同利用媒体查询给HTML设置不同的font-size，移动端布局中的文字、盒子尺寸都用rem进行设置。对于一些比较特殊的盒子，比如（固定的，或者需要参考页面宽度的），可以使用vw、vh进行设置。
• 缺点：单独写一套代码，与pc端完全不同

响应式布局：

• 响应式布局是移动端友好，在pc端、移动端共用一套方案。
• 缺点：
  • 不能很好的适配100%的手机屏幕
  • 大量css代码，不便于维护

固定布局：

手机端页面内容固定宽度参考320或375，页面内容水平居中。

标准的移动端页面

需要设置页面的视口为理想视口，用户不能缩放，缩放比例为1.0

• 利用来设置

        

• width=decive-width：页面宽度=设备的逻辑像素，即使用理想视口。
• initial-scale=1.0：页面的默认比例为1.0。这保证了css中的一个px就等于手机页面中的一个px。
• user-scalable：yes或or；设置用户是否可以通过手势来进行缩放页面。建议不允许。

rem+弹性布局（或rem+流式布局）：

1、确定页面框架（div+HTML5标签）

2、确定页面的主要参考逻辑像素（375 360 768 1024），以此为基础确定HTML标签的font-size。

• 320px->font-size:30px;
• 375px->font-size:40px;
• 414px->font-size:50px;

3.开发页面（从上往下）

• 盒子的尺寸是以rem为基础。
• 需要利用媒体查询来设置当屏幕的逻辑像素不同时,HTML标签采用不同的font-size。
• 像具体的内容处理（img 表单元素 文字 超链接,,,)跟以前一样，并没有什么区别。
• 以rem代替px，百分比保留。

布局方案抉择

像文字比较多的页面可以参考使用rem解决方案，比如淘宝、王者荣耀

像图案比较多的，布局简单点，可以响应式布局，或者响应式+流式布局来搞定