移动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-....与之相反