前言
一、移动端的一些概念
（⼀）、屏幕相关
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倍图之类的，但是具体使⽤哪⼀种看公司具体的需要
命名特点：
在实际开发中如果给的是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/
总结
本文总结了移动端的一些概念，移动端开发的几个注意点，还有移动端常⻅的几种实现⽅式，写的不好，请多指教，最后祝屏幕前的你，生活愉快，万事如意呀~~~