移动端开发

由于移动端设备的屏幕尺⼨⼤⼩不⼀，会出现：同⼀个元素，在两个不同的⼿机上显示效果不⼀样

（⽐例不同）。要想让同⼀个元素在不同设备上，显示效果⼀样，就需要适配，⽆论采⽤何种适配⽅式，中⼼原则永远是等⽐

（⼀）、移动端主流适配⽅案

1、单独制作移动端⻚⾯（主流）

为了在特定的设备上显示最好的视觉效果，⼤多的移动端产品都有PC端，和移动端两套不⼀样的⽹

站。

其技术实现通常为：服务器根据浏览器请求的user-agent判断设备类型，然后返回（或重定向）对应

的站点内容。

例如：京东商城、淘宝⽹、苏宁易购等

2、响应式⻚⾯兼容移动端（其次）

常⻅于PC、移动等多端共⽤⼀套代码的场景，⽐如bootstrap站点、三星⼿机官⽹

通过判断屏幕宽度来改变样式，以适应不同终端

缺点：制作麻烦，需要花费很⼤的精⼒去调兼容性的问题

(⼆)、移动端开发⼏个注意点

1、去除默认样式，可以⽤normalize.css

2、盒⼦模型采⽤box-sizing的属性，border-box属性值

3、超链接点击⾼亮背景的效果需要去除

1 -webkit-tap-highlight-color:transparent

三、移动端常⻅实现⽅式

（⼀）、移动端的技术选型

1、单独制作移动端⻚⾯

1>流式布局

就是百分⽐布局，也称为⾮固定像素布局

通过盒⼦的宽度设置成百分⽐来根据屏幕的宽度来进⾏伸缩，不受固定像素的限制，内容向两侧填

充，主要是设置宽度

⼀般配合以下属性使⽤，免得盒⼦⾥⾯的元素，被挤下来

max-width 最⼤宽度（max-height最⼤⾼度）

min-width 最⼩宽度（min-height 最⼩⾼度）（

1）、rem单位：相对单位，相对于html根元素的字体⼤⼩，通过更改html⽂字的⼤⼩，改变⻚⾯的

⼤⼩

（

2）、媒体查询（meidia Query）：

作⽤：

语法：

@media 媒体类型 关键字 （媒体特性）{css}

媒体类型（可以同时⽤多个媒体类型，⽤逗号隔开,这样他们之间就是或的关系）

all 所有设备

print 打印设备或打印预览

screen 带屏幕的设备（电脑，⼿机）**

speech 屏幕阅读器

关键字 and not only 来连接

将媒体类型或多个媒体特性连接到⼀起作为媒体查询的条件

and：可以将多个媒体特性连接到⼀起，相当于且的意思

not：排除某个媒体类型，相当于“⾮”的意思，可以省略

only：指定某个特定的媒体类型，可以省略

媒体特性(必须要有⼩括号)

width ⻚⾯可⻅宽度

max-width 视⼝的最⼤宽度（视⼝⼩于指定宽度时就⽣效，⼩于等于xxxpx）

min-width 视⼝的最⼩宽度（视⼝⼤于指定宽度时就⽣效）

max-height 最⼤⾼度

min-height 最⼩⾼度

orientation:landscape 横屏

orientation:portrait 竖屏

常⽤的断点

样式切换的分界点，我们称其为断点，也就是⽹⻚的样式

2>、flex弹性布局

3>、rem+媒体查询布局

使⽤@media查询，可以针对不同的媒体类型定义不同的样式

@media可以针对不同的屏幕尺⼨设置不同的样式

当重制浏览器⼤⼩的过程中，⻚⾯也会根据浏览器的宽度和⾼度重新渲染⻚⾯

尺⼨范围

设备划分

<768px

超⼩屏幕

max-width=768px

>=768px~<992px

⼩屏幕

min-width=768px按照设计稿与设备宽度的⽐例，动态计算并设置html根标签的font-size⼤⼩（媒体查询）

css中，设计稿元素的宽、⾼、相对位置等取值，按照同等⽐例换算为rem为单位的值

根字体=（⼿机横向设备独⽴像素值）/10 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，

即1rem=37.5px

如果设计稿是375px 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，即1rem=37.5px

⻚⾯中数值为：设计值/（设计稿宽度/10） 例如：100px/（

375px/10）=2.667rem

>=992px ~<1200px

中型屏幕

min-width=992px

>=1200px

⼤屏幕

min-width=1200px

1 <style>

2 body {

3 background-color: red;

4 }

5 /* 第⼀种⽅式 直接引⼊ */

6 /* 在992px-768px之间设置的样式 */

7 @media screen and (max-width: 992px) and (min-width: 768px) {

8 body {

9 background-color: orange;

10 }

11 }

12 /* 可以简写，默认写了screen and */

13 @media (max-width: 768px) {

14 body {

15 background-color: yellowgreen;

16 }

17 }

18 </style>

<!-- 第⼆种⽅式：外接式，针对不同的界⾯效果，可以写不同的样式，分别引⼊，写的时候，最好从

⼩到⼤来写

19

20 语法：media="媒体类型 关键字 (媒体特性)

21 -->

<link rel="stylesheet" href="./600.css" media="screen and (max-width:

600px) " />

22

23

（

3）、rem适配⽅案⼿机横向设备独⽴像素值，可以⽤flexible.js计算，⽤⾥⾯的js去做处理

css元素的设计值换算⽤css中的Cssrem: Root Font Size去实现 px to rem & rpx & vw (cssrem)

只要确定当前html⽂字⼤⼩就可以了.

综上所有，⼀起使⽤，选取⼀种主要技术选型，其他技术为辅助（推荐）

rem适配—移动端开发的步骤

第⼀步：拿到多⼤的设计稿，将root font size 改成 ：设计稿的⼤⼩/10

第⼆步：引⼊flexable.js ，动态的去修改html的字体⼤⼩

第三步：正常根据设计稿的⼤⼩去开发，将所有的px值换算为rem的值

vw也是百分⽐，只不过这个百分⽐只参考设备视⼝

vw（

Viewport‘s width）：1vw等于视⼝宽度的1%

vh（

Viewport’s height）：1vh等于视⼝⾼度的1%

vmin：vw和vh中的较⼩值

vmax：选取vw和vh中的最⼤值

（

4）、flexible.js实现

⼿机淘宝团队出得移动端适配库，它的原理是将当前设备划分为10等份，但不同设备下，⽐例还是⼀致的。

下载地址：

github地址：

官⽅⽂档地址：

😀 https://github.com/amfe/lib-flexible

https://github.com/amfe/article/issues/17

配合使⽤的插件（

vscode中直接安装）

px to rem & rpx & vw (cssrem)

Cssrem: Root Font Size

基准font-size（单位：`px`）, default: 16,调整成75

例如主流设计稿⼤⼩为750px，主要将html⽂字的⼤⼩设置为75px，⾥⾯⻚⾯元素rem值：⻚⾯元素的px

值/75，从⽽算出rem值

😀

4>、混合布局(主流)

5>、vw、vh（未来的趋势）（

1）、750的设计稿：html{font-size:13.3333vw}

1vw表示1%的屏幕宽度，⽽我们的设计稿通常是750px的，屏幕⼀共是100vw，对应的就是750px，

1vw=75px 那么1px就是0.13333vw，

同时我们知道另⼀个单位rem，rem是相对于html元素字体⼤⼩，放了⽅便计算，我们⾃定义html字体

⼤⼩为100px，

通过上⾯的计算结果我们知道1px是0.13333vw，那么100px就是13.333vw了。

这样后⾯的⽤rem就很好计算了。13.333vw对应的是100px，然后我们就可以很愉快的写rem单位了，

由于⾃定义的1rem=100px，

书写代码时，就是（设计图元素⼤⼩/100），单位是rem

如果750的设计稿设计⼀个盒⼦⼤⼩是200px，⾥⾯有字体⼤⼩50px，那么对应的就是，盒⼦宽⾼

2rem，字体⼤⼩是0.5rem

（

2）、1080设计稿：html{font-size:9.259vw}

如果设计稿时1080px，屏幕是100vw，那么对应的1px=0.09259vw，rem根标签依然⾃定义取100px，

那么就是1rem=100px，那么1rem=9.259vw。

如果1080的设计稿设计⼀个盒⼦⼤⼩是200px，⾥⾯有字体⼤⼩50px，那么对应的就是，盒⼦宽⾼

2rem，字体⼤⼩是0.5rem

总结：

虽然还是vw布局，但还是⽤rem去写

1、⽆关屏幕的⼤⼩，反正100vw，就是屏幕的100%，⽤屏幕的⼤⼩作为固定值去换算相对单位

2、⾃定义⼀个rem跟px之间的换算⽐值，为了好算⼀般是1rem=100px，计算出vw跟rem，px之间的关系

例如750的设计稿：1font-size=100px=1rem=13.3333vw

3、后⾯750设计稿上的所有尺⼨都⽤rem来算。例如200px*200px的盒⼦，就是2rem*2rem的盒⼦，也就是

26.666vw*26.666vw的盒⼦。

⽤vw去开发

1、看设计稿是多⼤，⾃定义1rem=100px， 然后1px=xxxvw, 将html{font-size:xxxvw}

2、去更改root font size ，更改1rem=100px

3、根据设计稿的⼤⼩，将px值写成rem

总结：

都是⼀个绝对值为参考值

flexable.js是以设备独⽴像素为绝对值，去算rem的值

vw是设备的视⼝的宽度为绝对值，去算rem的值

最终都是把设计稿中的px换算成rem