移动WEB开发

一、视口的概念

layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。js获取布局视口：document.documentElement.clientWidth | document.body.clientWidth；
visual viewport(视觉视口)：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。js获取视觉视口：window.innerWidth；
ideal viewport(理想视口)：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。js获取理想视口：window.screen.width；

二、视口标签

　　理想视口才是我们设计移动web需要的视口，那么如何去设置视口呢？

　　用meta标签：

　　<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
     maximum-scale=1.0, minimum-scale=1.0">

　　1、content属性：用来设置视口的，width属性就是视口的宽，它可以是任意数字，设为 device-width 表示设备的宽度，这就是我们需要的理想视口，当没有设置时默认会按980px去显示

　　2、initial-scale : 视口初始的缩放比，可设置为大于0的数字

　　3、user-scalable : 设置是否允许用户进行缩放，可设置为 yes / no 或 1 / 0

　　4、maximum-scale : 设置视口的最大缩放比，可设置为大于 0 的数字

　　5、minimum-scale : 设置视口的最小缩放比，可设置为大于 0 的数字

三、涉及显示的几个概念
　　1、物理像素与CSS像素
　　设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
　　CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

　 2、分辨率(物理像素)
　　screen.height //screen.width返回显示设备的信息。
　　除非调整显示设备的分辨率，否则看作是常量。

　　(显示)分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平像素数为160个，垂直像素数128个。

　　分辨率越高，像素的数目越多，感应到的图像越精密。

　　而在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

　　以分辨率为1024×768的屏幕来说，即每一条水平线上包含有1024个像素点，共有768条线，即扫描列数为1024列，行数为768行。

　　分辨率不仅与显示尺寸有关，还受显像管点距、视频带宽等因素的影响。其中，它和刷新频率的关系比较密切，严格地说，只有当刷新频率为“无闪烁刷新频率”，显示器能达到最高多少分辨率，才能称这个显示器的最高分辨率为多少。

　　3、PPI
　　pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。

　　手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。

　　这个数值是多少？按照2010年前苹果公司CEO史蒂夫·乔布斯（Steve Jobs）在iPhone 4发布会上对视网膜技术的介绍：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”(即所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。)

　　那么，是不是屏幕PPI超过这个数值就没有意义了？
　　==>除PPI之外，还看它的饱和度，渲染度。

　　4、DPR设备像素比
　　DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值：

　　DPR = 设备像素 / CSS像素(某一方向上)
　　普通密度桌面显示屏的devicePixelRatio=1
　　高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
　　主流手机显示屏的devicePixelRatio=2或3

　　因为大部分桌面显示器的devicePixelRatio为1，所以在PC端我们感受不出来CSS Pixel 与物理像素的差别。
　　举个栗子来说，一张100x100的图片，通过CSS设置它100px; height:100px; 。在电脑上打开，没有什么问题，但是在手机上打开，屏幕按照逻辑分辨率来渲染，假设手机的devicePixelRatio=3，那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片，你的图片可能因此变得模糊，因为细节不够。所以一般明智的做法是把图片换成300x300的，CSS宽高不变，这样在手机上展示时，CSS宽高换算成物理像素是300x300，你的图片也是300x300，就不会变糊了。

　　5、常用移动设备的PPI与DPR

IOS设备	PPI	DPR
iPhone4	326	2
iPhone4s	326	2
iPhone5	326	2
iPhone5s	326	2
iPhone6	326	2
iPhone6s	326	2
iPhone6 PLUS	441	3
iPhone6s PLUS	441	3
iPad	- -	2
iPad	- -	3
android	尺寸	dpr
低清设备	－	1
mx2	800*1280	2.5
小米note	720*1280	2.75
三星note4	-	4

　　6、二倍图

　　由于移动设备的物理像素和css单位px是不同的，在文字上的体现差别不大但在图片上可能就会造成模糊，

以iphone6为例，它的物理像素比是2，用css设置一张图片50 * 50的图片，此时在手机上的显示是100 * 100

的分辨率，相当于被拉伸了两倍，图片看起来就很模糊，解决办法是用100 * 100的图，再设置它的宽高为50 * 50。

　　背景精灵也是，会把精灵图 * 2，但获取它的background-position时，要先把精灵图 / 2,再去量它的位置 , 然后

设置background-size : 宽 / 2 高 / 2 ;

　　注：background-size: cover　: 背景拉伸到能覆盖这个容器

　　　　background-size: contain : 背景拉伸，当宽或高其中有一个铺满，就不再拉伸了

　　7、初始化

　　做移动端页面时的初始化：

　　　　（1）设置视口标签

　　　　（2）引入normalize.css(是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一)

　　　　（3）去掉一些移动端的默认模式

　　　　　　I、移动端的a标签点击会有高亮效果，需要清除，设为 transparent 透明

　　　　　　　html{ -webkit-tap-highlight-color: transparent ; }

　　　　　　II、移动端浏览器，ios默认有自己的外观需要去掉才能自定义样式

　　　　　　　html{ -webkit-appearance: none ; }

　　　　　　III、禁止长按页面时弹出菜单

　　　　　　　img,a{ -webkit-touch-callout: none ; }

四、移动开发的技术选型

　　1、单独做移动开发

　　通常情况下输入网址，会判断是PC端还是移动端打开，移动端打开就在域名前加 m. ，打开移动端的网页

　　-- 单独做移动端有下方几个技术方案

　　（1）、流式布局（宽度设为百分比的形式）

　　（2）、flex弹性布局（推荐）

　　（3）、less + rem + 媒体查询或者 rem + flexible.js (推荐)

　　（4）、混合布局（推荐）

　　2、响应式布局

　　（1）、媒体查询

　　（2）、bootstrap

五、flex基本样式

　　css3中新增的属性： display：flex;

　　弹性盒布局中有两根轴，主轴和侧轴

　　常见的父元素属性

　　1、flex-direction : 设置主轴的方向

　　　　（1）、row : 主轴为 X 轴，元素从左往右排列（默认）

　　　　（2）、row-reverse : 主轴为 X 轴，元素从右往左排列

　　　　（3）、column : 主轴为 Y 轴，元素从上到下排列

　　　　（4）、column-reverse : 主轴为 Y 轴，元素从下到上排列

　　2、justify-content : 设置主轴上子元素的排列方式（当主轴为X轴时）

　　　　（1）、flex-start : 元素左对齐（默认，结果与上面的row 相同）

　　　　（2）、flex-end : 元素右对齐（类似float:left, 与上面的row-reverse不同，它不会改变排列方式）

　　　　（3）、center : 元素居中对齐

　　　　（4）、flex-around : 平均分配剩余空间

　　　　（5）、flex-between : 两侧贴边再平均分配剩余空间

　　3、flex-wrap : 设置子元素是否换行

　　　　（1）：nowrap ：不换行（默认）

　　　　（2）：wrap : 换行

　　4、align-items : 设置侧轴子元素的排列方式，适合内容为单行时使用（当侧轴为Y轴时）

　　　　（1）：flex-start : 元素上对齐（默认，结果类似column）

　　　　（2）：flex-end : 元素下对齐

　　　　（3）：center : 居中

　　　　（4）：stretch : 拉伸，内容拉伸到和父级一样高

　　5、align-content : 设置侧轴子元素的排列方式，适合内容为多行时使用（当侧轴为Y轴时）

　　　　（1）：flex-start : 元素上对齐（默认，结果类似column）

　　　　（2）：flex-end : 元素下对齐

　　　　（3）：center : 居中

　　　　（4）、flex-around : 平均分配剩余空间

　　　　（5）、flex-between : 两侧贴边再平均分配剩余空间

　　6、flex-flow : 复合属性，同时设置direction 和 wrap

　　常见的子项属性

　　1、flex : num : 定义子项目多少份分配剩余空间（默认是0，根据父盒子的剩余空间计算）

　　2、align-self : 设置子项目在侧轴的排列方式，默认继承父级的排列方式

　　3、order : 定义子项目在主轴的排列顺序（默认都是0，数值越小排的越靠前）

六、rem + less + 媒体查询

　　1、rem基础

　　（1）、em : 是相对于父元素的字体大小来定的　

　　（2）、rem : （root em）

　　　　rem的基准是相对于html的字体大小（font-size）定的

　　　　如根元素设置font-size为12px,则其他元素设置的2em就等于24px

　　（3）、rem的优点就是通过修改html里面的文字大小来改变页面中元素的大小，方便整体控制

　　2、媒体查询（Media Query 是css3中的属性）

　　（1）、媒体查询可以针对不同屏幕尺寸去设置不同的样式

　　（2）、语法规范

　　　　@media mediatype and not|and|only （media feature）{

　　　　　　　CSS（code）;

　　　　}

　　mediatype : 查询类型

　　　　将不同终端设备划分成不同的类型，称为媒体类型

　　　　all : 所有类型

　　　　print : 用于打印机和打印预览

　　　　screen : 用于电脑屏幕，平板电脑，智能手机等

　　例如： @media screen and (min-width : 980px){

　　　　　　　　html{ font-size : 50px ; }

　　　　　　} 　　//当屏幕宽度大于等于 980px时

　　　　　注： min-width : 表示大于等于， max-width : 表示小于等于

　　（3）建议尺寸从小到大写

　　（4）引入资源（如针对不同屏幕大小，调用不同的CSS文件）

　　3、less

　　less是一门css拓展的语言，css预处理语言

　　less中引入另一个less文件： @import "less文件名，不用加后缀"

　　（1）、less编译

　　　　html不能直接解析less文件，需要通过编译转换为css文件

　　　　vscode的应用商店搜索 easy less，安装后在less文件里每次保存都会生成对应的css文件

　　（2）、less变量语法

　　　　@变量名：值 ;

　　　　注：变量名不能以数字开头，不能用特殊符号，用@前缀，大小写敏感

　　　　例如： @color : "#ccc";

　　　　　　　　css属性中 color ： @color ;

　　（3）、less嵌套

　　　　I、子元素的样式直接写在父元素里

　　　　　　如 div{

　　　　　　　　　a{ color : "#ccc"; }

　　　　　　　}

　　　　II、伪类，伪元素，交集选择等要在内层选择器前加上&

　　　　　　如 a{

　　　　　　　　　　&:hover{ color : "red"; }

　　　　　　　　}

　　（4）、less运算

　　　　less中任何数字，颜色或者变量都可以参加运算

　　　　注：加减乘除（运算符号）两侧要有空格

　　　　两个运算数只有一个有单位，结果为这个单位

　　　　如果两个都有单位，以第一个运算数的单位为准

　　4、如何通过rem+less+媒体查询写移动端页面

　　（1）、将屏幕划分成若干等分（这里假设为15等份）

　　（2）、利用媒体查询动态设置html里的字体大小

　　　　如：若屏幕大于等于 320px时，font-size为 320px / 15

　　　　　　若屏幕大于等于540px时，font-size为 540px / 15

　　　　　　若屏幕大于等于750px时，font-size为 750px / 15

　　（3）、页面元素的rem值 = 页面元素在750px像素下的px值 / 屏幕为750px的font-size

　　　　　　得到一个比例

七、rem + flexible.js

　　1、原理：将页面划分成10等份

　　2、需要安装一个将px转成rem的插件 ——> cssrem

　　　　它默认html的font-size是16px,需要到setting.json中把它设置为最大屏幕下的font-size

　　3、flexible是根据当前屏幕的宽度除以10来计算font-size的，假设我当前需要的最大宽度为750px时，

　　　　就需要加上限定：@media screen and (min- 750px){

　　　　　　　　　　　　　　　　html{ font-size: 75px; }

　　　　　　　　　　　　　}

　　　　
八、bootstrap的栅格系统

　　1、初始化时需要加上如下

　　　　//以IE最高版本内核进行渲染

　　　　//兼容html5和媒体查询

<!--[if lt IE 9]>

　　　　<![endif--]

　　2、bootstrap预定义了 .container类

　　（1）、响应式布局的容器，固定宽度，将内容划分成12份

　　（2）、定义了左右15px的内边距，在定义 .col外加上 .row 就不会有15内边距

　　（3）、大屏（screen >=1200px）宽为1170px .col-lg-*

　　　　　中屏（screen >=992px）宽为970px .col-md-*

　　　　　小屏（screen >=768px）宽为750px .col-sm-*

　　　　　超小屏（screen <768px）宽为100%px .col-xs-*

　　（4）、假设我现在需要最大宽度为1280时，用媒体查询定义

　　　　　　@media screen and (min-width : 1280px){

　　　　　　　　body{ "1280px"; }

　　　　　　}

　　3、预定义了 .container-fluid类

　　（1）、运用流式布局，用百分百宽度，适合单独做移动端开发

　　4、列偏移

　　.col-md-offset-* //可以将列向右偏移

　　5、列排序（比如想讲后面的列排到前面）

　　.col-md-push-* //推，往右推几份

　　.col-md-pull-*　 //拉，往左拉几份

　　6、响应式工具

　　根据屏幕的大小，对某些元素进行隐藏

　　.hidden-xs ——> 超小屏幕时隐藏

　　.hidden-sm ——> 小屏幕时隐藏

　　.hidden-md ——> 中屏幕时隐藏

　　.hidden-lg ——> 大屏幕时隐藏

　　注：.visible-....与之相反