CSS

进行到这里时，就开始变得有趣了。你可以再次依靠服务端功能检测，但这次是在单一网站的基础上进行优化，而不是重定向到另一个独立网站。有一些手机所支持功能的数据库可以参考，例如WURFL。它是以XML文件的形式开放的，你可以在设计优化内容之前，先通过它来查询设备所支持的功能。你还可以查询移动设备的UA字符串，找出这些设备的其他细节参数，例如是否有摄像头，屏幕尺寸是多少，以及它的语言种类等信息。

　　在客户端，你已经得到了为移动设备而优化内容所需的两个条件 媒体类型（media types）和媒体查询（media queries）。

　　媒体类型(media types)

　　就像你知道的那样，你可以指定不同的CSS来实现不同的用途，例如：

  
  

   
   <link href="main.css" type="text/css" media="screen" rel="stylesheet">
<link href="print.css" type="text/css" media="print" rel="stylesheet">
<link href="mobile.css" type="text/css" media="handheld" rel="stylesheet">
  
  

　　手持类的媒体类型允许你针对移动设备使用优化版的样式（例如精简的布局和排版等）。这是一个被支持得很好的机制，实现起来也很简单，但它确实有它的 缺陷。就像之前所说，它经常被开发者滥用，来给网站提供一个蹩脚的最低标准布局。事实上，OperaMini最近改变了默认类型，把默认使用手持型样式表 （handheld stylesheet）改为屏幕型样式表（screen stylesheet）。OperaMini可以处理大多数完整网站，因此它并不真正需要使用手持型样式表（handheld stylesheet）。如果你乐意，你可以在OperaMini的浏览器选项中手动设置回移动视图。

　　媒体查询(media queries)

　　媒体查询是CSS3的一个构想，它的用途跟条件注释非常相似 你可以把一大堆CSS规则封装嵌入到一个媒体查询中，然后把它应用到你的标记结构中，这一切取决于一个条件，类似屏幕尺寸是否小于480px？然后把代码放进去，代码类似这样：

  
  

   
   img 
   
   {
   
   
  margin
   
   :
   
    0 0 10px 10px
   
   ;
   
   
  float
   
   :
   
    right
   
   ;
   
   

   
   }
   
   

@media all and (max-width: 480px) 
   
   {
   
   
img {
margin
   
   :
   
    10px auto
   
   ;
   
   
float
   
   :
   
    none
   
   ;
   
   
display
   
   :
   
    block
   
   ;
   
   

   
   }
   
   
}
  
  

　　你甚至可以使用多个媒体查询，像下面这样：

  
  

   
   body 
   
   {
   
   
  max-width
   
   :
   
   800px
   
   ;
   
   
  font-family
   
   :
   
   georgia, serif
   
   ;
   
   

   
   }
   
   

img 
   
   {
   
   
margin
   
   :
   
   0 0 10px 10px
   
   ;
   
   
float
   
   :
   
   right
   
   ;
   
   

   
   }
   
   

.info 
   
   {
   
   
position
   
   :
   
   absolute
   
   ;
   
   
left
   
   :
   
   8000px
   
   ;
   
   

   
   }
   
   

@media all and (max-width: 480px) 
   
   {
   
   
img {
margin
   
   :
   
   10px auto
   
   ;
   
   
float
   
   :
   
   none
   
   ;
   
   
display
   
   :
   
   block
   
   ;
   
   

   
   }
   
   
}

@media all and (max-width: 240px) 
   
   {
   
   
img {
display
   
   :
   
   none
   
   ;
   
   

   
   }
   
   
.info 
   
   {
   
   
position
   
   :
   
   static
   
   ;
   
   

   
   }
   
   
}
  
  

　　OK，在这个例子中（源代码点击这里查看），浏览器中的图片在屏幕大于480px时会向右浮动，文本会环绕图片并通过外边距留出一点儿舒服的距离（另有一个信息隐藏在 p 元素中，并命名了一个 class 叫 info - 看看HTML代码）。文本流在一些小屏幕中看起来可能会有些蹩脚，因为那里没有足够的空间来让图片和定量的文本放置在同一行中，所以当屏幕小于480px时，图片就需要改变一下，让文本不再围绕在它旁边，而是用 display:block 让它们显示在不同行中。

　　等等,还有更精彩的！如果屏幕非常小以至于不能有效地展示图片，那就让它们消失，然后让隐藏信息显示在图片那儿，替代那些图片显示文本描述 这是一种将信息传达给读者的一种另类技巧，利用它也可以为那些使用屏幕阅读器的盲人用户提供原始文本，以便他们顺利浏览网站。图1展示了三个不同的浏览视 图，这是在那些支持媒体查询的浏览器中（例如Opera 9.5）表现出的不同形式。

图1：例子中三个不同的浏览模式

　　听起来挺好，但是有没有不足呢？好吧，目前浏览器对媒体查询的支持程度非常有限。Opera浏览器支持它们，Safari 3也可以（以及其它基于Webkit内核的现代浏览器），但是Firefox 3之前的版本并不支持，IE或其他浏览器也不支持。解决问题的方法之一，是使用媒体类型和媒体查询的组合。这是一种变通方案，但肯定不够理想。这点在将来应该会有所改善。