1、思考

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

移动互联网浏览

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

浏览器支持（桌面平台）

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

2、HTML

Body部分

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

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

Meta标记：Viewport

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

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

思考布局

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

3、针对移动平台

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

CSS参考

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

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

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

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

4、针对桌面平台

介绍：媒介查询Media Query

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

先看一下下面的代码：

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

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

操作：覆盖”之前的样式

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

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

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

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

5、可替代的方法

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

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

处理移动互联网浏览的方式很多，最终可能是多种方式联合使用。无论是是使用媒介查询或者子域名转向的方式，要点在于提前对移动平台的布局进行规划。
武汉网站建设领导品牌！武汉网站建设首选珞珈学子网络科技，精英技术团队，技术咨询电话：027-68772750  13618602336