移动端开发

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

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

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

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地址：

官⽅⽂档地址：