移动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 / 04、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、PPIpixels 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设置它width:100px; height:100px; 。在电脑上打开，没有什么问题，但是在手机上打开，屏幕按照逻辑分辨率来渲染，假设手机的devicePixelRatio=3，那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片，你的图片可能因此变得模糊，因为细节不够。所以一般明智的做法是把图片换成300x300的，CSS宽高不变，这样在手机上展示时，CSS宽高换算成物理像素是300x300，你的图片也是300x300，就不会变糊了。5、常用移动设备的PPI与DPRIOS设备 PPI DPRiPhone4 326 2iPhone4s326 2iPhone5 326 2iPhone5s 326 2iPhone6 326 2iPhone6s 326 2iPhone6 PLUS 441 3iPhone6s PLUS 441 3iPad - - 2iPad - - 3android 尺寸 dpr低清设备 － 1mx2 800*1280 2.5小米note 720*1280 2.75三星note4 - 46、二倍图由于移动设备的物理像素和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文件）<link rel="stylesheet" href="s320.css" media="screen and (max-width : 639px)"><link rel="stylesheet" href="s640.css" media="screen and (min-width : 640px)">3、lessless是一门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.js1、原理 ： 将页面划分成10等份2、需要安装一个将px转成rem的插件 ——> cssrem它默认html的font-size是16px,需要到setting.json中把它设置为最大屏幕下的font-size3、flexible是根据当前屏幕的宽度除以10来计算font-size的，假设我当前需要的最大宽度为750px时，就需要加上限定：@media screen and (min-width: 750px){html{ font-size: 75px; }}八、bootstrap的栅格系统1、初始化时需要加上如下//以IE最高版本内核进行渲染<meta http-equiv="X-UA-Compatible" content="ie=edge">//兼容html5和媒体查询<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"><![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{ width: "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-....与之相反