上海品茶

在上文中我一直用非常简单明了的例子来证明技术的可靠性和可行性。然而，在现有的网站中有很多网站都专门为小屏幕设备开发的版本，这种技术在改进这些版本的网站时是非常容易运用的。使用CSS来进行页面布局设计的最大卖点之一就是可以为我们的设计方案提供可替代的版本。那么我现在就准备用我自己的商业网站来做一个实验，用这些技术来实现网站页面布局的改进。

1. 电脑桌面布局

我的商业网站目前采用的是多列布局模式。这样看起来主页会有一点不一样，但是我们使用的是固定宽度的三列布局模式。这是很久之前的一个设计了，所以当时我们再建设这个网站时并没有考虑到媒体资讯库。

2. 添加新的样式表

如果想要把现有的布局模式改编成线性布局模式，那么需要更改的东西有很多，所以我准备通过媒体资讯库新建一个独立的样式表，那么只有在最大宽度小于480像素时，这个样式表蔡可以在原先的样式表加载后运行。
      <link rel=" stylesheet" type=' ”text/css media=" only screen and (max-width: 480px), only screen and (max-device -width: 480px) href=”/assets/css/ small -device.css”/>为了创建我的新样式表，我把网站默认样式表看做网站并将其保存为small-decice.ccs的格式。那么现在它就成了我主要样式表的一个副本了。接下来我所要做的就是仔细检查并覆盖原有的代码规则然后再把我不需要的东西全部删掉。

3. 减小页面顶部面积

我第一件想做的事情就是把页面顶部的标志调整为最适合小屏幕设备显示的大小。因为标志是一个背景图片，所以通过在样式表中载入一个新的标志就可以顺利完成了。我还有一个与现在不一样的顶部面积很小的标志背景图片。
      ! background d-image: url (/ img/ small-bg .png);
      }
#wrapper{
! width: auto;
      ! margin: auto;
! text-align: left;
      ! background- image: url (/ img/ small-1ogo.png) ;
      ! background-position: left 5px;
! background-repeat: no-repeat;
      ! min-height: 400px;
}

4. 线性页面布局

下一个重点工作就是让页面布局线性化并且页面只允许有一-个纵向视图。电脑桌面的页面布局是通过应用浮标进行的，那么我所要做的就是找到让列表浮动的规则，然后把它们设置为:无浮标、宽度自动调节的模式。这样设置会删除现存列下面的所有列。
      .article #aside {
! float: none;
! width: auto;

5. 整理设计方案

在进行了设计方案整理后，剩下的事情就是在ProtoFluid中查看页面布局，合理调整页面边缘空白的数量，还有对条列中的空白区域进行补充。因为可以在ProtoFluid中使用Firebug，所以蔡能够让主要工作流程都围绕着Firebug展开，现在我可以以非常快乐的心情去将CSS复制到样式表。

6. 在iPhone上进行测试

建立和上传样式表之后，我要开始检查它在一台真正的移动设备中是如何工作的。在一台iPhone上，我发现网站加载后仍然会放大画面，而不是出现我优化过的具有良好可读性的单列缩放状态。我迅速在Safari开发者网站上搜索出现这个问题的原因---要在网站的开头增加一个meta标签，并且根据设备屏幕的宽度来设置视窗的宽度。
       <meta name= ”viewport" content=" width=device-width”/>在设置了网站的meta标签后，网站页面在屏幕上就是以单列的模式缩小显示的。
对网站进行这个非常简单的改进说明，我们可以为你的网站增加一个更简单的版本。如果我现在从头开始建立一-个网站的话， 我一定会使用媒体资讯库，因为在创建网站的过程中它可以为我提供很多种非常有用的方法来简化制作过程。例如，加入线性编辑命令，在可以使用Css转换的情况下使用背景图片或者使用流体图像。在我们的台式电脑上，网页的布局特征是回旋型的，但是这种布局方法并不适合在用户触屏设备上与内容进行互动。所以，如果浏览器显示窗口非常窄而且并不是回旋型的布局，我就会尝试用JavaScript进行改进。上面所将到的这种方法意昧着我们正在研究. 的停止回旋型网页加载的产品马上就要问世了，这种方法可以为小型屏幕手机的使用者提供- -个合理的解决方案。今后我还会继续研究如何为移动设备用户提供回旋型的可替代版本的网站，也许这种交互性更强的方法更设备用户提供回旋型的可替代版本的网站，也许这种交互性更强的方法更适合触屏设备用户。

7. 为老式浏览器提供媒体资讯库支持

主要介绍了媒体资讯库在支持它的设备上的一些作用。如果你只对支持iPhone或其他大众设备的移动Web浏览器（例如Opera迷你浏览器）感兴趣，那么你根本不需要去担心你的浏览器是否支持某项功能。如果你想要在台式电脑浏览器里使用媒体资讯库，那么你会非常高兴地发现，这里有很多可用的技术可以通过JavaScript来添加浏览器支持，比如IE8浏览器（以及更低版本的IE浏览器）、火狐浏览器3.5和最新的IE9浏览器都会支持CSS3媒体资讯库。

8. 大胆的尝试

使用媒体资讯库是一一个你在日常生活中可以真正用得.上并用得到CSS3的地方。还有一件需要你记住的事，那就是支持媒体资讯库的浏览器同时也是支持很多其他的CS3属性的，所以针对不同设备定义的样式表都可以通过使用另外的CS3来实现- -个非常流畅的设置，那么不管你是在iPhone或者其他设备上查看，它都会非常流畅。