英文原文>>enter link description here

  • 介绍

面向手机的Web开发是当下一个热门方向。在今年,首次出现智能手机的销售超过PC机。越来越多的用户通过手机等移动设备来浏览网页,这就意味着开发人员对网站优化使之适应手机浏览器成为关键。

对大多数开发人员来说,“手机”战场仍然是是一片充满未知数的汪洋。很多人都有现成的传统网站,但却忽视了与之并肩的手机用户。反之,网站设计更应该是面向桌面浏览器并尽量去兼容手机浏览器,本网站(html5rocks.com)也不例外。动手吧,做一个网站的移动版只是举手之劳。

  • 做一个对手机友好的网站——HTML5ROCKS.COM

作为练手,我认为从本网站 html5rocks着手将它升级为对一个对手机友好的版本是一件很有趣的事。为了最小的工作量,我过去仅仅只关注被要求的几款智能手机。当然,我练手的目的并不是要去从零开始去新建一个手机版网站再去维护两套代码库,因为那样做纯粹是严重浪费时间。我们已经有了一个确定的网站结构(结构语言负责,如(X)HTML),有一套很直观的样式(有层叠样式表CSS负责),当然了网站的核心(有程序语言JS呢)都在也都在那里。总之,很多网站也都这样子罢了。

本文讨论我们怎样去面向Android和iOS设备将 html5rocks优化出一个支持移动版的网站。在不同操作系统的设备上试着加载 html5rocks,看上去都是五花八门,各有不同。再试几个常见的网站,都基本没有一个固定的样式。所以,需要增加一些有益的东西在网站上,使其看起来更棒而且运行良好,然后你将看到的 html5rocks就是…… enter image description hereenter image description here (左图来自桌面浏览器,右图来自手机)

  • CSS的媒体库(CSS MEDIA QUERIES)

有一段时期HTML4和CSS2也支持 media-dependent 样式表,例如:

<link rel="stylesheet" media="print" href="printer.css">

当需要打印时,我们针对打印设备提供一些特殊样式的页面内容。CSS3又采纳了针对媒体类型这个想法,并向增强媒体库功能迈出一大步。媒体库允许一些更精确的样式表标签来扩展媒体类型的有效性。这使得定制特殊输出设备的的样式,而不用改变内容本身成为可能。直接将已存在的样式输出为想要修改的样式,这真是不可思议,太棒了!

你可以通过在外部样式表的media属性中定义目标设备的屏幕宽度(screen width),设备宽度(device width),定位(orientation)等属性来使用媒体库。详情见W3C媒体库API

  1. 目标屏幕大小(TARGETING SCREEN SIZES)

在下面的例子中,phone.css将被应该在考虑手持设备浏览器,并且宽度<=320像素的宽屏设备的代码中。

    <link rel="stylesheet"  media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

在媒体库中这个only关键字是考虑到不兼容CSS3的浏览器忽略本规则。

下面这一句是针对屏幕宽度在641px 到800px之间的设备。

<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">

媒体库代码也可以出现在<style>标签之间,下面这一句是仅当屏幕纵向时,定位all媒体库的:

<style>
  @media only all and (orientation: portrait) { ... }
</style>
  1. MEDIA="HANDHELD"

我们需要驻足几分钟,来讨论一下media="handheld"。事实就是, Android 和iOS 忽略了media="handheld"。声称使用了media="handheld"将会错过高质量的内容,(浏览器)开发商也不大可能去为了media="handheld"而去维护一个降低质量的版本。把这作为所谓的”整个网络世界“的座右铭,所以现在大部分只能手机浏览器都直接忽略了手持设备样式表。

现在mobile.css执行的试一下以改变的风格:

a.减少了网页中多余的空格和间距,对小屏幕来说空白都是多余的!!!

b.移除了:hover states状态。这玩意儿确实在触摸屏设备没什么用。

c.调整布局为单列。后面详谈。

d.移除了box-shadow,即那些主要的div容器的边框阴影,大型的边框阴影降低网页性能。

e.使用CSS弹性布局的盒模型box-ordinal-group来改变主页上主要模块的顺序。你将会发现在主页(HTML5ROCKS.COM)上显示在"LEARN BY MAJOR HTML5 FEATURE GROUPS"之前的”TUTORIALS“在手机板上却会显示在"LEARN BY MAJOR HTML5 FEATURE GROUPS"后面。这种顺序变化在手上产生的流动感,其实框架却没有发生任何改变。CSS的弹性和模型简直FTW(For The Win,网络用词,一般用来表达对某一事物喜欢到极致的心情)了!!!!

f.移除透明效果opacity,alpha滤镜值的修改严重影响性能。

!!!!---------悲剧,翻译到这里发现这篇文章已经已经有人翻译了>>这里去看