前言

一、移动端的一些概念

（⼀）、屏幕相关

1、屏幕⼤⼩：

指屏幕的对⻆线⻓度，单位是英⼨（inch）。常⽤尺⼨有：3.5⼨、4.7⼨、5.0⼨、5.5⼨、6.0⼨等 备注：1英⼨（inch）=2.54厘⽶（cm）

2、屏幕分辨率

指屏幕在：横向、纵向上所拥有的物理像素点总数，⼀般表示⽤n * m表示 例如：iPhone6的屏幕分辨率为750 * 1334

注意：屏幕分辨率是⼀个固定值，屏幕⽣产出来就确定了，⽆法修改

屏幕分辨率、显示分辨率是两个概念，系统设置中可以修改的是显示分辨率

显示分辨率是设备当前所⽤到的物理像素点，也可以说是：屏幕分辨率>=显示分辨率

3、屏幕密度（ppi）

⼜称屏幕像素密度，是指屏幕上每英⼨⾥包含的物理像素点个数，单位是：ppi（pixels per inch） ppi值才是真正衡量⼀块屏幕是否清晰的核⼼指标

PPI的计算⽅法是：PPI=开平⽅（X*X+Y*Y）/Z (其中X,Y指长,宽像素数，Z指屏幕⼤⼩)。 例如iphone4s分辨率为640*960，屏幕⼤⼩为3.5英⼨，它的PPI=开平⽅(960*960+640*640)/3.5=329.650

（⼆）、像素相关

2、css像素

⼜称：逻辑像素，css像素是⼀个抽象的⻓度单位，单位也是px，它是为web开发者创造的，⽤来精确 的度量web⻚⾯上的内容的⼤⼩，我们在编写css，js,less中所⽤的都是css像素（可以理解为：‘程序 员像素’） 思考：代码中的css像素跟物理像素的⽐？ 他们两个在2010年之前是⼀样，之后就不⼀样

3、设备独⽴像素

设备独⽴像素简称DIP或DP，⼜称屏幕密度⽆关像素

引⾔：在没有出现⾼清屏的年代，1个css像素对应1个物理像素，但⾃从⾼清屏问世，⼆者就不再是1对 1的关系了

苹果公司，在2010年推出了⼀种新的显示标准：在屏幕尺⼨不变的前提下，把更多的物理像素点压缩 ⾄⼀块屏幕⾥，这样分辨率会更⾼，显示效果会更加细腻，苹果将这种屏幕成为：Retina屏幕（视⽹ 膜屏幕），与此同时推出配备这种屏幕的划时代产品-iPhone4 设备独⽴像素的出现，使得即使在【⾼清屏】下，例如苹果的retina屏，也可以让元素有正常的尺⼨， 让代码不受到设备的影响，它是设备⼚商根据屏幕特性设置的，⽆法更改

设备独⽴像素于物理像素关系 普通屏幕下1个设备独⽴像素对应1个物理像素

⾼清屏幕下1个设备独⽴像素对应N个物理像素

设备独⽴像素与css像素关系 在⽆法缩放的情况下（标准情况下）：1css像素=1设备独⽴像素，即：dpr=物理像素/设备独⽴像素

4、像素⽐

像素⽐（dpr）：单⼀⽅向设备【物理像素】和【设备独⽴像素】的⽐例

5、像素之间的关系

在不考虑缩放的情况下（理想状态下）：

普通屏（dpr=1）：1css像素=1设备独⽴像素=1物理像素

⾼清屏（dpr=2）：1css像素=1设备独⽴像素=2物理像素

⾼清屏（dpr=3）：1css像素=1设备独⽴像素=3物理像素 程序员写了⼀个width为100px的盒⼦，

那么： 代表100个css像素； 若⽤户不进⾏缩放，则对应100个设备独⽴像素；

在dpr为2的设备上，这100个css像素占据了100*2=200个物理像素（横向）

例如：iPhone6为例 物理像素：750px， 设备独⽴像素375px， css像素：375px

（三）、图⽚⾼清显示

1、位图像素

位图：⼜称点阵图像或珊格图像，是由n个像素点组成的。放⼤后会失真。（常⻅⼜：png，                           jpeg， jpg、gif）

             ⼀般使⽤：PS等软件进⾏编辑

               位图像素也是⼀个⻓度单位，  位图像素可以理解为位图中的⼀个‘⼩格⼦ʼ，是位图的最                           ⼩单元

（四）、视⼝概念

视⼝（viewport）就是浏览器显示⻚⾯内容的屏幕区域

PC端视⼝：在pc端，视⼝的默认宽度和浏览器窗⼝的宽度⼀致，在css标准⽂档中，pc端视⼝也被称为：初始 包含块。

移动端视⼝：移动端视⼝可以分为布局视⼝、视觉视⼝、理想视⼝（完美视⼝）标准

1、布局视⼝：默认的布局视⼝容器是980px，对pc⻚⾯进⾏压缩，压到跟⼿机⼀样⼤⼩，就可以看了，只是元素看上去很⼩，只能 ⼿动去缩放，体验效果不好

2、视觉视⼝：视觉视⼝就是⽤户可⻅的区域，它的绝对宽度永远和设备屏幕⼀样宽，但这个宽度⾥包含的css像素值是变化的 例如：⼀般⼿机将980个css像素放⼊视觉视⼝中

注意：布局视⼝经过压缩后，横向的宽度⽤css像素表达，就不再是375px，⽽是980px

（五）、meta标签设置

<!-- 设置完美视⼝⼤⼩ 
2 device-width 视⼝宽度和设备保持⼀致
3 initial-scale 表示⻚⾯的初始缩放值，==>屏幕宽度（设备独⽴像素）/布局视⼝宽度
4 user-scalable 是否允许⽤户缩放
5 maxinum-scale=1.0, 最⼤允许缩放⽐例
6 mininum-scale=1.0， 最⼩允许缩放⽐例
7 -->
8 <meta name="viewport"
9 content="width=device-width,
10 initial-scale=1.0,
11 user-scalable=no
12 maxinum-scale=1.0,
13 mininum-scale=1.0 " />

（六）、多倍图的概念

咱们已经知道，在移动端⾥，1个css像素==多个物理像素，那么对于开发来说，有什么影响呢？ 问题：图⽚也是有分辨率的概念的，分辨率指的是物理像素还是px像素呢？ 图⽚的分辨率：指的是图⽚在⽔平垂直⽅向需要显示多少个物理像素（发光⼩点）

⼀倍图： 使⽤的是100*100的图⽚ 100*100分辨率图⽚==》对应屏幕中100*100的发光点（物理像素）==》对应css中50*50px 此时强⾏设置100*100px，很明显对⽐起来就较为模糊

⼆倍图 使⽤200*200的图⽚ 200*200分辨率的图⽚==》对应屏幕200*200的发光点（物理像素）==》css中100*100px 此时设置为100*100px，正好完美对应显示

结论： 在现在移动端中，例如：在iphone6中，需要显示多少px的图⽚，为了不被强⾏放⼤， 需要使⽤宽⾼ 为2被分辨率的图⽚，显示更好的效果。 ⽽这种使⽤的宽⾼为2倍分辨率⼤⼩的图⽚，称之为2倍图 实际开发过程中还存在2倍图、3倍图、4倍图之类的，但是具体使⽤哪⼀种看公司具体的需要

命名特点：

二倍图 xxxx@2x.png

三倍图 xxxx@3x.png

在实际开发中如果给的是1倍图，那就多⼤写多⼤；如果是2倍图，那就是图⽚的⼤⼩/2 ；3倍图，就 是图⽚的⼤⼩/3······；

（七）、移动端 运⾏在移动设备上的产品

移动设备：⼿机 、平板 ipad

我们以后做的产品⼤部分都只需要适配ios系统和安卓系统即可

响应式： 在不同的设备上都能给⽤户再好的体验

响应式开发： 随着移动互联⽹的兴起，不同设备的分辨率相差⽐较⼤，如果在不同设备上显示同⼀个⻚⾯，则⽤户 体验差。

响应式⻚⾯设计是⼀种⽅法，使得⼀个⽹站能够兼容多个终端，⽽不⽤为每个终端制作特定的版本。 它使⼀个⽹站在任何类型的屏幕上，都能被轻松浏览使⽤，采⽤响应式设计，在不同设备中，⽹站会 重新排列 展现出不同的设计⻛格，以完美的适配任何尺⼨的屏幕

响应式设计原则： 

渐近增强 基本需求==>更好体验

优雅降级 完备功能==>向下兼容

移动优先的响应式布局采⽤的是渐进增强原则

⼆、移动端开发选择

由于移动端设备的屏幕尺⼨⼤⼩不⼀，会出现：同⼀个元素，在两个不同的⼿机上显示效果不⼀样 （⽐例不同）。要想让同⼀个元素在不同设备上，显示效果⼀样，就需要适配，⽆论采⽤何种适配⽅ 式，中⼼原则永远是等⽐

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

1、单独制作移动端⻚⾯

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

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

2、响应式⻚⾯兼容移动端

常⻅于PC、移动等多端共⽤⼀套代码的场景，⽐如bootstrap站点、三星⼿机官⽹ 通过判断屏幕宽度来改变样式，以适应不同终端 缺点：制作麻烦，需要花费很⼤的精⼒去调兼容性的问题

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

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

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

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

-webkit-tap-highlight-color:transparent

三、移动端常⻅实现⽅式

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

1、单独制作移动端⻚⾯

1>流式布局.

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

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

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

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

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

2>、flex弹性布局

3>、rem+媒体查询布局

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

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

作用：

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

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

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

语法：

@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 竖屏

<style>
2 body {
3 background-color: red;
4 }
5 /* 第⼀种⽅式 直接引⼊ */
6 /* 在992px-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
⼿机横向设备独⽴像素值，可以⽤flexible.js计算，⽤⾥⾯的js去做处理
css元素的设计值换算⽤css中的Cssrem: Root Font Size去实现 px to rem & rpx & vw (cssrem)
只要确定当前html⽂字⼤⼩就可以了.
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) " />

（3）、rem适配⽅案

按照设计稿与设备宽度的⽐例，动态计算并设置html根标签的font-size⼤⼩（媒体查询） css中，设计稿元素的宽、⾼、相对位置等取值，按照同等⽐例换算为rem为单位的值 根字体=（⼿机横向设备独⽴像素值）/10 例如：iPhone6，根字体=375/10=37.5px 以rem为单位， 即1rem=37.5px

（4）、flexible.js实现

下载地址：

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>、混合布局(主流)

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

移动端开发的步骤

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

第⼆步：引⼊flexable.js ，动态的去修改html的字体⼤⼩ 第三步：正常根据设计稿的⼤⼩去开发，将所有的px值换算为rem的值

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

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

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

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

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

总结：

虽然还是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

bootstarp框架:https://www.bootcss.com/

总结

本文总结了移动端的一些概念，移动端开发的几个注意点，还有移动端常⻅的几种实现⽅式，写的不好，请多指教，最后祝屏幕前的你，生活愉快，万事如意呀~~~

今天的文章移动端开发（学好移动端这一篇就够啦）分享到此就结束了，感谢您的阅读。