移动端开发

一、一些概念

（一）、屏幕相关

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

（二）、像素相关

1、物理像素

又称：设备像素，物理像素是一个长度单位，单位是px，1个物理像素就是屏幕上的一个物理成像点，就是屏幕中一个微小的发光物理元器件（可简单理解为超级微小的灯泡），是屏幕能显示的最小颗粒，它由屏幕制造商决定，屏幕生产后无法修改。

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物理像素    2010之前

高清屏（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等软件进行编辑
• 位图像素可以理解为位图中的一个‘小格子’，是位图的最小单元

        举例：给你买鞋，一直给你买36码  

• svg）
• AI，Sketch等软件进行编辑

举例：你的脚多大，给你买多大的鞋  是根据数字关系现场绘图的

（四）、视口概念

视口（viewport）就是浏览器显示页面内容的屏幕区域

PC端视口：

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

移动端视口

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

1、布局视口

默认的布局视口容器是980px，对pc页面进行压缩，压到跟手机一样大小，就可以看了，只是元素看上去很小，只能手动去缩放，体验效果不好

2、视觉视口

视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但这个宽度里包含的css像素值是变化的

例如：一般手机将980个css像素放入视觉视口中。

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

描述一下iPhone6屏幕

1. 1、物理像素：750px
2. 2、设备独立像素：375px
3. 3、css像素：980px

3、理想视口

与屏幕（设备独立像素）等宽的布局视口，称之为理想视口；让布局视口宽度与屏幕等宽（设备独立像素），靠meta标签实现

用户不需要缩放、滚动就能看到网站的全部内容

要为移动端设备单独设计一个移动端网站

开启理想视口的方法

<meta name='viewport' content='width=device-width' />

（五）、meta标签设置

 

   <!-- 设置完美视口大小  device-width   视口宽度和设备保持一致initial-scale  表示页面的初始缩放值，==>屏幕宽度（设备独立像素）/布局视口宽度user-scalable  是否允许用户缩放maxinum-scale=1.0, 最大允许缩放比例mininum-scale=1.0， 最小允许缩放比例--><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=nomaxinum-scale=1.0,mininum-scale=1.0 " />

    

（六）、多倍图的概念

咱们已经知道，在移动端里，1个css像素=1个设备独立像素=多个物理像素，那么对于开发来说，有什么影响呢？

问题：图片也是有分辨率的概念的，分辨率指的是物理像素还是css像素呢？

图片的分辨率：指的是图片在水平垂直方向需要显示多少个物理像素（发光小点）

如：图片的分辨率是200*200

表示图片显示在屏幕中需要用到200*200的物理像素（发光小点）

提问：以200*200分辨率的图片显示为例

如果图片需要显示完全，需要 多少*多少 的发光点

之前在pc端中，需要写 多少*多少 px？

  200css像素*200css像素，也就是在pc端1个css像素=1个物理像素

现在移动端，如果：iphone6，需要写 多少*多少 px？

200*200个物理像素

100*100个设备独立像素

100*100个css像素

例子：需求：在移动端iphone6中显示100*100px的盒子，里面装对应的图片

iphone6物理像素宽时750px，设备独立像素时375px，

1个设备独立像素=1个css像素=2个物理像素

 50*50设备独立像素=  50*50css像素    =100*100物理像素

100*100设备独立像素=100*100css像素=200*200物理像素

一倍图：

使用的是100*100 物理像素的图片

100*100分辨率图片==》对应屏幕中100*100的发光点（物理像素）==》对应css中50*50px

此时强行设置100*100px css像素，很明显对比起来就较为模糊

二倍图

使用200*200的图片

200*200分辨率的图片==》对应屏幕200*200的发光点（物理像素）==》css中100*100px

此时设置为100*100px，正好完美对应显示

结论

在现在移动端中，例如：在iphone6中，需要显示多少px的图片，为了不被强行放大， 需要使用宽高为2被分辨率的图片，显示更好的效果。

而这种使用的宽高为2倍分辨率大小的图片，称之为2倍图

实际开发过程中还存在2倍图、3倍图、4倍图之类的，但是具体使用哪一种看公司具体的需要

命名特点：

[e-mail]   二倍图

[e-mail]    三倍图

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

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

           移动设备：手机 、平板 ipad

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

        响应式：

           在不同的设备上都能给用户再好的体验，不同设备，显示不同效果

        响应式开发：

           随着移动互联网的兴起，不同设备的分辨率相差比较大，如果在不同设备上显示同一个页面，则用户体验差。

           响应式页面设计是一种方法，使得一个网站能够兼容多个终端，而不用为每个终端制作特定的版本。

           它使一个网站在任何类型的屏幕上，都能被轻松浏览使用，采用响应式设计，在不同设备中，网站会重新排列

           展现出不同的设计风格，以完美的适配任何尺寸的屏幕

        响应式设计原则（面试题）

           渐近增强

               基本需求==>更好体验

            优雅降级

               完备功能==>向下兼容

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

二、移动端开发选择

   由于移动端设备的屏幕尺寸大小不一，会出现：同一个元素，在两个不同的手机上显示效果不一样（比例不同）。要想让同一个元素在不同设备上，显示效果一样，就需要适配，无论采用何种适配方式，中心原则永远是等比

（一）、移动端主流适配方案

1、单独制作移动端页面（主流）

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

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

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

rem   flexible.js

vw  vh

2、响应式页面兼容移动端（其次）

媒体查询

常见于PC、移动等多端共用一套代码的场景，比如bootstrap站点、三星手机官网，星巴克官网

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

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

只适用一些内容简单，要求不高的官网

（二）、移动端开发几个注意点

1、去除默认样式，可以用normalize.css（默认样式不去除，处理各浏览器对默认样式的不同解析），resize.css（直接把所有的默认样式都去掉，要用，你就自己重设）   

2、盒子模型采用box-sizing的属性，border-box属性值

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

-webkit-tap-highlight-color:transparent；

三、移动端常见实现方式

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

1、单独制作移动端页面

百分比，flex，rem，vw

1>  流式布局

就是百分比布局，也称为非固定像素布局

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

一般配合以下属性使用，免得盒子里面的元素，被挤下来

max-width 最大宽度（max-height最大高度）  

min-width 最小宽度（min-height 最小高度）

2>、flex弹性布局

3>、rem+媒体查询布局

（1）、rem单位

相对单位，相对于html根元素的字体大小，通过更改html文字的大小，改变页面的大小

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

作用：

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

    常用的断点

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

尺寸范围	设备划分
<768px	超小屏幕	max-width=768px
>=768px~<992px	小屏幕	min-width=768px    max-width=992
>=992px ~<1200px	中型屏幕	min-width=992px     max-width=1200
>=1200px	大屏幕	min-width=1200px

   

<style>body {background-color: red;}/* 第一种方式  直接引入 *//* 在992px-768px之间设置的样式 */@media screen and (max-width: 992px) and (min-width: 768px) {body {background-color: orange;}}/* 可以简写，默认写了screen and */@media (max-width: 768px) {body {background-color: yellowgreen;}}</style><!-- 第二种方式：外接式，针对不同的界面效果，可以写不同的样式，分别引入，写的时候，最好从小到大来写语法：media="媒体类型 关键字 (媒体特性)--><link rel="stylesheet" href="./600.css"  media="screen and (max-width: 600px) " />

（3）、rem适配方案

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）

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

        根字体=（手机横向设备独立像素值=设计稿css像素值）/10        

        设计稿元素设计数值转成rem： 设计值/（设计稿宽度/10）  

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

如果设计稿是375px     写一个100px*100px的盒子，用rem来表示   100px/（375px/10）=2.667rem

设计稿是固定的，根据设计稿来开发页面，用rem这个相对单位去根据设计稿设计的大小开发好页面后，再根据不同的手机设备独立像素去更改根标签字体的大小，就可以实现响应式的变化

手机横向设备独立像素值，可以用flexible.js计算，用里面的js去做处理

css元素的设计值换算用css中的Cssrem: Root Font Size去实现    

           px to rem & rpx & vw (cssrem)

（4）、flexible.js

=css像素）划分为10等份，但不同设备下，比例还是一致的。

只要确定当前html文字大小就可以了.

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

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

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

第一步：拿到多大的设计稿，将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中的最大值

 

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

1vw表示1%的屏幕宽度，而我们的设计稿通常是750px的，屏幕一共是100vw，对应的就是750px， 1vw=7.5px        那么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

2、响应式页面兼容移动端

百分比，flex，rem,媒体查询，

媒体查询

以上已讲述

bootstarp框架

https://www.bootcss.com/