针对移动设备的CSS3布局

针对移动设备的CSS3布局

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

 

---

一、思考

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

移动互联网浏览

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

浏览器支持（桌面平台）

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

二、HTML

Body部分

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

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

帮助

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

< 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分红两个布局，一个布局用来适应移动平台，一个用来适应桌面平台。在实践中，一般要根据目标的不一样，分开弄几个布局，这里为了简化教程，只分为两个。

三、针对移动平台

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

CSS参考

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

帮助

1 2 3 4 5 6 7 8 9

.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订阅移动到顶部区域。

帮助

01 02 03 04 05 06 07 08 09 10 11 12 13

h 3 .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能够在源码上找到。所以，其实若是站在移动设备优先的角度上思考的话，布局的时候也没什么特别之处。

四、针对桌面平台

介绍：媒介查询Media Query

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

先看一下下面的代码：

帮助

1 2 3 4

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

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

 

帮助

1 2 3 4 5 6

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

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

操做：覆盖”以前的样式

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

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

帮助

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

@media all and ( min-width : 800px ){    .sidebar ul{      border : none ;      padding : 0 ;    }    .sidebar ul li{      display : block ;      padding : 0 ;      border : none ;    }    h 3 .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并不意味着什么特殊值，一切都 要根据本身的须要去思考。

五、可替代的方法

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

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

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

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