《优万HTML5移动Web开发》由会员分享，可在线阅读，更多相关《优万HTML5移动Web开发（12页珍藏版）》请在金锄头文库上搜索。
1、优万 HTML5 移动 Web 开发说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择 native app 和 web app 还争论了一番，最后综合考虑，我们选择了 web（我们选择了 h5）开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。1. 响应式 web 设计说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在 PC 端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度居中显示，后者则采用百分
2、比。关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的” 响应式布局” ，响应式布局意味着媒体查询，这个在 css2 就已经出现的东西随着 html5、css3 的到来又增添了新的生机。响应式 web 设计并非新的技术，只不过将已有的开发技巧（弹性布局、弹性图片和媒体查询等）整合在了一起，并命了这个听起来很牛 X 的名字响应式 web 设计。犹如当年的 Ajax 一样，将已有的技术重新组合发挥新的作用。（1）.媒体查询初探。媒体查询并非新出现的技术，如下：其中就使用了媒体查询，通过 标签的 media 属性为样式表指定了设备类型，当然 CSS3 时代的媒体查询更加
3、丰富。发现了他们的区别吗？对，不只是针对设备进行适配，而且加了一个条件，就是当设备纵向放置的时候才匹配，咱们再看一个。大家会发现我们又拓展了一个条件，对，就是当设备屏幕的宽度大于 960px 才会加载style.css 样式文件。我们究竟有哪些特性是可以被探测到的呢？下面列了一部分供大家参考（参考自 http:/www.w3.org/html/ig/zh/wiki/CSS3 媒体查询）：- width 视口宽度- height 视口高度- device-width 设备屏幕的宽度- device-height 设备屏幕的高度- orientation 检测屏幕处于横屏还是竖屏- aspect-
4、ratio 基于视口的宽高比例- device-aspect-ratio 基于设备屏幕的宽高比- color 颜色的位数，如 min-color：32 匹配设备是否有 32 位或以上的颜色- color-index 设备的颜色索引表中的颜色数- monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如 monochrome：3- resolution 检测屏幕或打印机的分辨率，如 min-resolution：300dpi(dpi 后面会介绍) ，也可以是每厘米像素点的度量值，如 min-resolution：120dpcm- scan 扫描方式，值为 progressive（逐
5、行扫描）、interlace（隔行扫描）- grid 检测输出设备是网格设备还是位图设备创建媒体查询时，上述特性（scan 和 grid 不行）都可以加上 min 和 max 前缀创建媒体查询的范围。除了 link 标签能够进行媒体查询，是不是还有其它的呢，答案是 Yes 。html 中的 meta 标签，此前我们常用的应该是这个但是现在我们要说的不是这个，而是这个：在多数 ios 和 android 设备的浏览器都支持 viewport meta 元素覆盖默认的画布缩放设置。在标签中插入 meta 标签，设置相应属性即可，如上代码，name=”viewport” content 中width
6、=device-width 表示浏览器页面宽度等于设备宽度（同理可以设置高度，也可指定具体值），initial-scale=1 表示页面不缩放保持，mininum-scale=1 和 maximum-scale=1 表示允许用户最小缩小至原大小和扩大到原大小（实际就是不让缩放），user-scaleable=no 表示禁止缩放 , target- densitydpi = high-dpi 表示适配高分辨率的屏幕，还可以取值为 dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，后面的四个定性，第一个定量，即 dpi_value 是
7、DPI 值，device-dpi 是使用设备原本的 dpi 作为目标 dp，不发生默认缩放，而后面的三个是指 dpi 取值在一定范围的表示。这里我们先介绍前文出现过的一个名词 dpi，所表示的是每英寸所拥有的像素（pixel ）数目，数值越高，即代表显示屏能够以越高的密度显示图像。当达到人眼的极限分辨率时，乔帮主给它取了一个很高端的名字Retina。那么目前市面的手机分辨率是怎样的一个分布呢， ios 大家都知道的，从 iphone4 时代开始就已经是 Retina 屏了，至于 Android 可以看下此前 Google 官方公布的数据：从上面可以看出，高分屏和超分屏已经是主流了，具体的适配范
8、围还是看各自的项目和定位吧。讲了这么多，有人可能会疑惑为什么这些都不是用在 CSS 中的？别急，慢慢来，现在就介绍如何在样式中运用，按照上述屏幕分辨率的四种划分，我们可以看到基本可以舍弃ldpi 了。/* 中分辨率屏幕 */*高分辨率屏幕*/*超高分辨率屏幕（传说中的 Retina 屏）*/上面就是在 css 中的用法，把我们需要的 css 代码包含在大括号中就能用了，是不是很方便的样子%_%。当然我们还可以用到之前提供的几个特性，如下：针对视口宽度不大于 768 像素的情况加载大括号中的样式。虽然我们可以把设备的分辨率可以分为这几类，但是屏幕的尺寸实在太多，如果针对每一种尺寸写一种样式，我觉
9、得设计师和前端面不用干别的了，因为开发成本实在太大，而且没有必要，我们只需要针对绝大多数的设备结合媒体查询和弹性布局来调整，减少开发成本。2.CSS3 新增属性现在移动端两大阵营 ios 和 android 都是基于 webkit 内核的，而 webkit 内核对 CSS3的支持走在了前面，在这里我们可以抛开翔一样的 ie 家族，尽情享受多彩绚丽 CSS3 世界吧！CSS3 给我们带来了如：文字阴影（text-shadow）、盒子阴影（ box-shadow）、圆角（border-radius ）、背景渐变（ background: linear-gradient(#000, #fff)）、2
10、D 变换（transition）、动画（animation）等大家耳熟能详的常用属性外，还有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、-webkit-box-reflect、-webkit-marquee、-webkit-box 等 webkit 内核私有属性，至于这些属性其他浏览器支持程度，有兴趣的可以自己研究研究，这上面的每一个属性都有自己的使用场景，就看如何灵活运用。今天我不全部列出，仅简单介绍几个。（1）、介绍的第一个就是 display：-webkit-box，我们知
11、道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有 inline-table、table-cell 等神马的，那么display: -webkit-box 怎么用呢，什么举个应用场景，对于下图所示的情况，父元素被1、2、3 均分，且 2 和 1 之间间隔 10px，你会怎么做？这时候我们可以试试新的 display:-webkit-box，另外还有如下属性配合使用，-webkit-box-orient 子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默认值是 inline-axis，即横向排列
12、-webkit-box-flex 子元素之间比例，仅作一个系数-webkit-box-direction 子元素排列顺序 normal | reverse | inherit，其中默认值是 normal-webkit-box-flex-group 以组为单位的流体系数-webkit-box-ordinal-group 以组为单位的子元素排列方向-webkit-box-lines 子元素是否换行，类似 word-wrap 和 word-break 的作用-webkit-box-align 子元素垂直方向的对其方式-webkit-box-pack 子元素水平方向的对其方式这些配合使用的属性我们全部
13、默认即可CSS：HTML：怎么理解上面的代码呢，父亲有一块地，要分给兄弟几个，除去老大和老二之间的分割线所占的那块，剩下的部分均分的分数由 li 的兄弟个数和 box-flex 的总数确定，现在一共三兄弟，每兄弟的 box-flex 都是 1，所以就总分数=1*1+1*1+1*1=3。如果代码稍作修改那么现在老二的 box-flex 是 2 了，总分数就是 1*1+1*2+1*1=4，其中老大老三各占一份，老二占两份，显示效果如下：（2）、-webkit-text-size-adjust:none;我做项目的时候发现一个问题，就是当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大，无论
14、你怎么设置字体大小都无效，后来才知道是 text-size-adjust（https:/developer.mozilla.org/en-US/docs/CSS/text-size-adjust）在作怪。浏览器默认会根据当前屏幕和内容作调整，在 webkit 内核的浏览器中只需要-webkit-text-size-adjust:none 就禁止自动调整，至于是否全局活局部使用看自己的项目需求。如上图所示，很明显当手机由竖屏转向横屏的时候主题区域的文字自动变大，跟你自己设置的大小无关，当你设置了-webkit-text-size-adjust:none 后横屏的效果是这样的这样，字体的大小就有我
15、们自己设置，是可控的。（3）、字级单位。我们常用的有 px、pt、百分比、 em 等，很惭愧，我最近才知道有 rem，而且是个相当不错的朋友。前面的几个单位大家都比较熟悉，不知道有没有和我一样小白的才知道rem 的呢，我们就介绍一下这个新朋友，它是随着 css3 来到这个世界。我们之前用 em、百分比的时候遇到的问题就是计算，而且当嵌套的层级太多时就会非常难以把控，而用 px 则被固定死了，现在我们用 rem 完全不用担心这个问题，因为rem 的参照对象只有根节点。我们只需设置根节点的大小，所有子节点都只需参照它来设计就可以，下面是 px、em 、百分比和 pt 的对比根据上面的图表（红色部分
16、为默认，当然不同的浏览器渲染默认值不一样，具体还需各位实测）可以看出，我们只需设置 html 根元素字体大小为 75%，对应的 px 值就是 12，这样我们可以很方便的设置页面的宽高和字体大小，当然单位是 rem，这样参考对象才会永远是 html 而不是父元素，当需要变化的时候，只需改变 html 的大小其他的元素都会相应变化，方便极了。3、HTML5 新增标签。在 html5 中新增量很多标签，加强连 html 标签的语义化，如等等，这些标签都各自有自己大意义，不再仅仅是 span 和 div，虽然 html4 中也有很多语义化的标签，但是不如 html5 丰富。除了这些新增的标签，还有一些此前就有的标签，但是类别新增，最具代表性的就是表单 form，而本文要介绍的就是 form。以上除了 type=text 外，其他的都是新增的，如果浏览器支持这些属性的话，就会自动调用相应组件，如在移动设备中 type=number/email/text 时，浏览器会调用不同版面的键盘，这样加快用户的输
