针对移动设备的CSS3布局

一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主，不管这个预言是否应验，让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务，本教程学习用CSS3的一些技术来让网页布局适应移动设备。

1、思考

在编写适应移动设备的布局前有几个问题值得思考。

移动互联网浏览

限制HTTP请求:3G信号传输费用昂贵，可能的话也要限制图像显示。
不同的屏幕尺寸: 移动设备屏幕尺寸宽度一般来说从320到480不等，但是也会因为设备的不同有很大差异，所以在CSS里面预先设定宽度并非明智之举。
优化某一类别: 市面上有很多种移动设备以及操作系统、浏览器等，所以优先测试你的访问者用得比较多的设备，现在智能手机一般是iPhone、iPad、黑莓、谷歌Android、塞班Symbian、window等，要根据区域内情况有重点地选择测试。
禁用悬停（Hover）: 触摸屏并不能很好地支持hover，所以做菜单时，最好不要使用下拉菜单等形式，hover在移动设备上一般来说只能用于增加视觉的效果（比如更改颜色）。

浏览器支持（桌面平台）

其次，记住要跨浏览器支持，谚语有云“房间里的大象（译者注：英文谚语，指显而易见而又被忽略的事实）指的就是IE。幸运的是，现在发现，只要不会影响到内容，网站在不同浏览器的显示不一定要完全相同。通常来说一个无法支持CSS3的浏览器也能提供尚可接受的浏览体验。总而言之，要提前知道网页在各种浏览器上的显示效果。

2、HTML

Body部分

不仅应该知道如何编写合法的html，而且要尽可能地简洁。保持html的流畅、去掉不必要的Div一直都是不错的习惯，在移动设备浏览上，这点显得更为重要。而且，以往一些需要7个嵌套Div标记的效果，现在通过CSS3的少量代码就能实现。

尽管这不是html5教程，但是我依然坚持Xhtm的严格语法。以下是一个典型布局的html，这是一个包含头部、底部、侧边栏、主内容的页面。你可以看到，这个页面相当简单明了，如果采用html5的元素，能够更加的简洁。

<body>
  <div class='pg'>
    <div class='head'>
      <h1><a href='#'>My Blog</a></h1>
    </div>
 
    <div class='pg-main'>
 
      <div class='entries'>
        <h2><a href='#'>An Entry About Something</a></h2>
        <p class='preview'>段落文字一前言</p>
        <p>段落文字一</p>
        <hr/>
 
        <h2><a href='#'>An Entry About Something Else</a></h2>
        <p class='preview'>段落文字二前言</p>
        <p>段落文字二</p>
        <hr/>
 
        <h2><a href='#'>A Third Entry</a></h2>
        <p class='preview'>段落文字三前言</p>
        <p>段落文字三</p>
      </div>
 
      <div class='sidebar'>
        <h2 class='not-there'>Blog Menu</h2>
        <h3 class='subscribe'>Subscribe</h3>
        <ul class='subscribe'>
          <li><a href='#'>RSS</a></li>
        </ul>
        <h3>Social</h3>
        <ul>
          <li><a href='#'>Facebook</a></li>
          <li><a href='#'>Twitter</a></li>
        </ul>
        <h3>Categories</h3>
        <ul>
          <li><a href='#'>Something</a></li>
          <li><a href='#'>Nothing</a></li>
          <li><a href='#'>All Things</a></li>
          <li><a href='#'>No Things</a></li>
        </ul>
        <h3>Archives</h3>
        <ul>
          <li><a href='#'>June 2010</a></li>
          <li><a href='#'>May 2010</a></li>
          <li><a href='#'>April 2010</a></li>
          <li><a href='#'>March 2010</a></li>
        </ul>
      </div>
    </div>
 
    <div class='foot'>
      <p>© No one in particular 2010</p>
    </div>
 
  </div>
</body>;

Meta标记：Viewport

在head部分，一般会放置例如CSS样式表、语言、标题等等，但是为了平滑移动设备浏览器效果，还需要而外增加一个Viewport，参考代码如下：

1	`<meta` `name="viewport"` `content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>`

这是苹果公司建议的，用于帮助iPhone渲染页面，这个标记会自动匹配页面和浏览器窗口并防止缩放，一些其他的移动浏览器也支持，如黑莓。测试发现，这个标记并不会影响到桌面平台浏览器的效果，所以建议放置在head里面。

思考布局

这个教程会将以上的html分成两个布局，一个布局用来适应移动平台，一个用来适应桌面平台。在实践中，通常要根据目标的不同，分开弄几个布局，这里为了简化教程，只分为两个。

3、针对移动平台

本教程的目的不在于富文本技术或者页面设计，所以，呈现的效果会比较简陋，不过这并不重要，重要的是驾驭样式表的思路。一切的要点在于优先考虑移动平台的布局，因为一个在移动平台上显示正常的布局很可能也能适应桌面平台。所以要先从移动平台的布局弄起，这能够确保在移动平台统治的趋势下，你的网站不会丢失听众。

CSS参考

先思考一下，要避免出现很长的滚动条，所以修改一下博客的菜单，让用户体验更好。

.sidebar ul{
  border-left:solid 1px #ccc;
  padding:0 0 0 5px;
}
.sidebar ul li{
  display:inline;
  padding:0 5px 0 0px;
  border-right:solid 1px #ccc;
}

这样菜单就变成横排的，每个目录中间有一条分割线，干净整洁。在移动设备上，保持菜单在屏幕底部是非常有用的，假如浏览完一篇文章，菜单不在底部的话，还要再滚动回菜单的地方，这样就很不方便，在一些设备上，滚动窗口可能会相对麻烦得多。当然这个方式有利有弊。

其次将RSS订阅移动到顶部区域。

h3.subscribe{
  display:none;
}
.sidebar ul.subscribe{
  position:absolute;
  top:25px;
  right:10px;
  border:none;
  color:#fff;
}
.sidebar ul.subscribe li{
  border:none;
}

除此之外，就是调整一些字体的大小，超链接的颜色等，此教程还包含一个CSS Reset，完整的CSS可以在源码上找到。因此，其实如果站在移动设备优先的角度上思考的话，布局的时候也没什么特别之处。

4、针对桌面平台

介绍：媒介查询Media Query

通过CSS3的媒介查询，跨设备的问题能够较好地解决。媒介查询可以根据若干个条件（比如屏幕尺寸），使页面对移动设备进行匹配，

先看一下下面的代码：

.pg{</span>
<pre>  width:800px;
  margin:0 auto;
}

在这个例子中，宽度是800px，但是这样必须确保所有用户的浏览器窗口宽度都是至少800px，否则就会出现水平滚动条。所以将这条代码放置在媒介查询里面，代码如下：

@media all and (min-width:800px){</span>
<pre>  .pg{
    width:800px;
    margin:0 auto;
  }
}

这样事情变得很简单，代码中“all”意味着这个style可用于所有的媒介，还有其他选项，比如“print”则适用于打印机

操作：覆盖”之前的样式

有一个重要的地方需要注意的是，保留原来布局样式的代码，将新布局的样式代码放置在媒介查询中，这样一些不支持CSS3媒介查询的浏览器就可以调用之前的布局，同时桌面平台上一些较老的浏览器的显示也不会有什么大问题。

以下例子，在新布局中，我们将侧边栏从底部移开，并让list的部分以列表的形式显示。代码如下：

@media all and (min-width:800px){
  .sidebar ul{
    border:none;
    padding:0;
  }
  .sidebar ul li{
    display:block;
    padding:0;
    border:none;
  }
  h3.subscribe{
    display:block;
  }
  .sidebar ul.subscribe{
    position:static;
    top:auto;
    right:auto;
    border:inherit;
    color:inherit;
  }
  .sidebar ul.subscribe li{
    border:inherit;
  }
}

这样就吧侧边栏推到左边（结合css其他代码，请参阅源文件），并把RSS订阅放回到适用于桌面浏览器显示的地方。你可以用不同平台浏览器打开源文件，并水平缩放，进行测试。

也许有人会疑惑为什么是800px，800px是否有什么特殊之处？事实上，我认为这有点宽。在新发布的windows7上有一个屏幕边缘捕捉的功能（译者注：就是把窗口拉到两边，会把窗口的缩放成屏幕的一半，拉到顶上会最大化），如果把为桌面平台显示的网站宽度设成600px，这样一个在 1280px宽的屏幕下，捕捉到边缘时不需要调整窗口大小就能正常显示布局。当然这只是一个例子而已，只是要清楚800px并不意味着什么特殊值，一切都要根据自己的需要去思考。

5、可替代的方法

方法不止一种，本文展示了媒介查询这种实用方法以及一些只基于CSS的移动平台网站布局的办法。还有以下的方法可以联合使用，打造移动平台的网站布局。

多个模板: 制作不同的模板，然后主题系统检测用户浏览器，根据不同浏览器显示不同的主题。这通常是也可以通过制作几个不同的CSS文件来实现。
子域名: m., mobile., 和 .mobi有成为标准的趋势, 不同子域名有不同内容，在避免内容重复上，和多个模板的技术差不多。
可变的布局: 网站也能够设计成完全可变布局，无论浏览器窗口的大小，内容会自动适应。事实上，在这个教程里，适用于移动平台的样式表，就是可变的布局，使用媒介查询的方式好处在于可以复制背景并降低HTTP请求。

处理移动互联网浏览的方式很多，最终可能是多种方式联合使用。无论是是使用媒介查询或者子域名转向的方式，要点在于提前对移动平台的布局进行规划。

原文链接：Flexible, Mobile-First Layouts with CSS3

posted @ 2014-06-23 10:28 Jackson.Bruce 阅读(1367) 评论(0) 编辑收藏举报

刷新页面返回顶部

Jackson.Bruce

针对移动设备的CSS3布局