Blogger Information

Blog 14

fans 0

comment 0

visits 8835

Special Recommendation

More>

Related recommendations

1、基本概念

1.1背景：

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

1.2概念：

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

2、屏幕像素

2.1逻辑像素：

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

2.2设备物理像素：

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

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

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

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

iPhone：375和414
320（少数）
android：360
414
480

3、视口（viewport）

3.1概念：

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

3.2手机网页展示分类：

3.2.1布局视口：

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

3.2.2理想视口：

按照手机的逻辑像素进行页面布局(一个逻辑像素=一个css像素）。
需要手动配置。
在<head>中添加以下一句代码，开启理想视口。
<meta name="viewport" content="width=decive-width,initial-scale=1.0"/>

3.2.3视觉视口

4、移动端常用单位

4.1-px：

绝对长度度量单位。

4.2-em：

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

4.3-rem：

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

4.4-vw：

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

4.5-vh：

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

4.6-单位选择：

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

5、移动端兼容性

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

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

6、移动端实战

6.1原理：

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

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

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

6.3一般步骤

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

6.4移动端解决方案：

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

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

6.4.2—响应式布局：

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

6.4.3—固定布局：

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

7、标准的移动端页面

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

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

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

8.1—确定页面框架（div+HTML5标签）

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

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

8.3—开发页面（从上往下）

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

9、布局方案抉择

像文字比较多的页面可以参考使用rem解决方案，比如淘宝、王者荣耀
像图案比较多的，布局简单点，可以响应式布局，或者响应式+流式布局来搞定

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端工具安装

2022-10-15 10:10:45