技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 移动网站开发――CSS

移动网站开发――CSS

浏览:2229次  出处信息

    上一篇我们谈到了移动网站中的标签，想必很多人也很想了解Mobile CSS的情况吧，本文将和大家一起探讨移动网站中的CSS标准。

介绍

    Mobile css的标准也是有些复杂的，与前一篇文章中提到的类似，之前存在着一个W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事实上它们都是CSS 2.1的子集，而且内容非常接近，不同的是，WAP CSS 1.0针对移动设备加入了一些扩展，这些扩展通过-wap-前缀来实现。

    后来，W3C将二者进行了整合，吸收了WAP CSS1.0的一些优点，推出了CSS Mobile Prifile 2.0规范，它也是CSS 2.1的一个子集。我们本文将主要讨论这个规范。

CSS Mobile Profile 2.0中的CSS支持

    因为这是CSS 2.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代码是可以与桌面版的相兼容甚至完全一致的。甚至有些网站的移动版直接使用HTML 4/5或者XHTML 1.0的DTD。这样移动版网站可以直接通过handheld的media type来制定一个移动页面专用的CSS文件：

1

    绝大多数传统手机上的浏览器都支持handheld媒体类型，包括opera mini和windows mobile中的IE。

    其实考虑到传统手机的自身的限制和移动网络速度的限制，通过media type来加载外部样式是不可取的，通常用于移动版页面的样式不多，而多加载一个外部样式的代价是巨大的。所以，大部分的网站的移动版采用在head中嵌入样式表的方式。

    如果，你一定要采用外部样式的话，最好不要用@import，因为有些手机浏览器并不支持。

    特别值得一提的是，mobile webkit(包括iphone safari和android chrome lite等)不支持handheld。

    而在视觉上的差异，主要是字体的表现差异，这和各个手机浏览器有关，想要做的像素完美，不是件容易的事情。

总结

    虽然，移动网站貌似不用考虑太多的功能，布局简单，功能简单，但是现实并没有想象中的那么简单。移动网站面临的最大的问题是浏览器众多，手机终端差别又很大，开发的时候，会遇到这种细节问题。

    目前国内移动网站的前端开发，还处于起步阶段，随着iPhone和Android等智能手机的流行，针对高端智能手机设备的网站开发将逐渐盛行，如 @SMbey0nd 所言，Mobile Web风暴，即将席卷中国，对于这个相对较新的领域，我们还有很多事情要做。

    其实本文仅仅涉及到Mobile CSS的一些非常基础的方面，希望可以抛砖引玉，引起更多的人研究和分享移动网站开发的前端技术和技巧，如果你有较深入的研究，欢迎通过前端观察与大家分享。

参考

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

建议继续学习：

  1. 面向移动设备的HTML5开发框架梳理    (阅读：5936)
  2. 各浏览器的默认CSS    (阅读：3701)
  3. 移动产品设计之场景感    (阅读：3533)
  4. CSS的未来：明智的布局工具终于到来    (阅读：3137)
  5. CSS 忍者：安全的 CSS hacks 秘籍    (阅读：2819)
  6. 优先为移动设计带来的优势    (阅读：2840)
  7. 移动互联网系统架构十大陷阱    (阅读：2795)
  8. 移动网站开发――标记语言    (阅读：2676)
  9. 使用CSS框架的优点和缺点    (阅读：2637)
  10. 12个很少被人知道的CSS事实    (阅读：2619)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：页面模块化实现的条件和基本实现思路
后一篇：CSS3 媒介判断与 iPhone 4 视网膜显示屏 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1