CSS在挪动网站开发设计的前端开发技术性和技能

详细介绍

Mobile css的规范也是一些繁杂的，与前1篇文章内容中提到的相近，以前存在着1个W3C制订的CSS Mobile Profile 1.0和OMA的WAP CSS 1.0，客观事实上它们全是CSS 2.1的非空子集，并且內容十分贴近，不一样的是，WAP CSS 1.0对于挪动机器设备添加了1些拓展，这些拓展根据-wap-前缀来完成。

后来，W3C将2者开展了整合，消化吸收了WAP CSS1.0的1些优势，推出了CSS Mobile Prifile 2.0标准，它也是CSS 2.1的1个非空子集。大家本文将关键探讨这个标准。

CSS Mobile Profile 2.0中的CSS适用

由于这是CSS 2.1的1个非空子集，那末大家对这个标准的內容应当不容易生疏，大家根据这个报表能够很直观的看到CSS MP对CSS的适用状况：

  适用的 不适用的 挑选器 全局性挑选器(*)、种类挑选器(例如h1, div, p等)、子挑选器(p>span)、连接伪类 (:link,:visited)、动态性伪类(:active, :focus)、类挑选器、id挑选器、排序(h1,h2,h3{}…) :first-child、:hover 、:lang() 伪类， :first-letter 、:first-line 伪元素， 弟兄挑选器(例如h1 + p)，特性挑选器 (例如 a[href], a[target="_blank"]) 情况和边框 background, background-color, background-image, background-repeat, background-attachment, background-position, border, border-width, border-color, border-style(注1) 无 精准定位 position, top, right, bottom, left, z-index 无 目录 list-style, list-style-image, list-style-type list-style-position 基础的盒实体模型 display(注2), margin, padding, height, min-height, max-height, width, min-width, max-width, float, clear, visibility, overflow(注3), overflow-style(注4) 无 颜色 color 无 字体样式 font, font-family, font-style, font-variant, font-weight, font-size(注5) 无 文本 text-indent, text-align, text-decoration(注6), text-transform, white-space word-spacing, letter-spacing, unicode-bidi 线型 vertical-align(注7) line-height 基础的客户页面 utline, outline-color, outline-style, outline-width cursor 翻转 marquee-style, marquee-direction, marquee-play-count, marquee-speed 无 @标准 @charset, @import, @media(注8), @namespace @page

• 注1：border-style只适用常见的none、dotted、dashed、solid和inherit，其它的几个并沒有被纳入标准。
• 注2：display仅限于inline、block、list-item、none和inherit，不适用run-in和inline-block
• 注3：overflow只适用auto
• 注4：overflow-sytle只适用marquee值
• 注5：font-size只适用尺寸重要词，例如small、medium、bigger等，px、pt和百分比等不被适用。
• 注6：text-decoration只适用none、blink、underline和inherit等，overline、line-trough不被适用。
• 注7：vertical-align 只适用top, middle, bottom, baseline 和inherit。sub, super, text-top, text-bottom, 百分比和长度不被适用
• 注8：@media标准只适用 handheld 和all 新闻媒体种类。

用法与访问器适用

就像以前文章内容里边提到的那样，现阶段绝大部分的手机上是适用XHTML Basic 1.0和XHTML MP 1.0规范的，这就代表着在某种水平上挪动网站的HTML/XHTML编码是能够与桌面上版的相适配乃至彻底1致的。乃至一些网站的挪动版立即应用HTML 4/5或XHTML 1.0的DTD。这样挪动版网站能够立即根据handheld的media type来制订1个挪动网页页面专用的CSS文档：

绝大部分传统式手机上上的访问器都适用handheld新闻媒体种类，包含opera mini和windows mobile中的IE。

实际上考虑到到传统式手机上的本身的限定和挪动互联网速率的限定，根据media type来载入外界款式是不能取的，一般用于挪动版网页页面的款式很少，而多载入1个外界款式的成本是极大的。因此，绝大多数的网站的挪动版选用在head中嵌入款式表的方法。

假如，你1定要选用外界款式的话，最好是不必用@import，由于一些手机上访问器其实不适用。

非常值得1提的是，mobile webkit(包含iphone safari和android chrome lite等)不适用handheld。

而在视觉效果上的差别，关键是字体样式的主要表现差别，这和各个手机上访问器相关，要想做的像素完善，并不是件非常容易的事儿。

总结

尽管，挪动网站貌似无需考虑到太多的作用，合理布局简易，作用简易，可是实际并沒有想像中的那末简易。挪动网站遭遇的最大的难题是访问器诸多，手机上终端设备区别又很大，开发设计的情况下，会遇到这类细节难题。

现阶段中国挪动网站的前端开发开发设计，还处在起步环节，伴随着iPhone和Android等智能化手机上的时兴，对于高档智能化手机上机器设备的网站开发设计将慢慢风靡，如 @SMbey0nd 所言，Mobile Web飓风，将要席卷我国，针对这个相对性较新的行业，大家也有许多事儿要做。

实际上本文仅仅涉及到到Mobile CSS的1些十分基本的层面，期待能够毛遂自荐，引发更多的人科学研究和共享挪动网站开发设计的前端开发技术性和技能，假如你有较深层次的科学研究，欢迎根据前端开发观查与大伙儿共享。

参照

• http://www.w3.org/TR/css-mobile/
• Mobile style – CSS Mobile Profile 2.0
• complete css guide Mobile profile