百度公开鼓励站长们多用HTML5技术做PC站与移动站，而HTML5设计的网站的一个优点就是实现自适应特别方便，它能识别终端设备屏幕的大小从而对输出的内容做出响应调整。众所周知，现在的终端屏幕尺寸分类太多，各种移动设备也层出不穷，这个技术就完美解决了在不同的终端设备上呈现相同的网页效果。

自适应网站的用户体验很好，也很利于优化，对于一些基本的配置，不少站长都不是很清楚，余斗今天几点

1、阻止移动浏览器重构页面大小

大部分的终端浏览器都会在载入页面的时候自动调整大小，如果不加以设置，会导致布局错误，现在主流的ios和安卓浏览器都是基于 webkit核心，都支持 viewport meta元素覆盖默认的画布缩放设置，只需在HTML的标签中插入一个标签

代码表示是将一个页面放到设备实际尺寸两倍显示。

2、更改网页为百分比布局

传统的网页布局都是固定网页宽度，这样的缺点就是当某个浏览窗口处于媒体查询固定的范围之外时，网页就以水平滚动才可以完整浏览。

自适应网站要避免这个缺点必须要以百分比布局来构架页面。在样式表中不要以 width:xxx px;而是指定一个百分比宽度width:xx%;或者直接就是width:auto;比如我们定义的head页面宽度为940px，页面整个宽度为960px，那么我们在css中写head的宽度时应为

这里有一个简易的公式将固定像素宽度转换成对应的百分比宽度目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度

3、用em替换px

类似与第二条，我么在文字像素的定义时也要采用相对单位em，公式为 目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度，例如现在浏览器默认的文字为16像素，我们在body的全局定义中先写好样式

我们在标题的文字用的是48像素，那么就要写样式为

4、流动布局的使用

流动布局可以实现每个区块都为浮动，不为固定不变，这样就避免宽度不够时，后面的块元素在水平方向溢出，而是自动滚动到前一个元素的下方。代码为;

5、 Media Query技术的使用

Media Query技术的最大好处可以根据获取到的设备宽度加载不同的css样式，比如，设置屏幕宽度不超过480px时加载one.css

同样可以创建多个样式表，以适应不同设备或者不同分辨率的宽度范围，而余斗推荐的更好的做法是将多个Media Query整合在一个样式表文件中，具体代码为

上面的代码中定义的样式类只有在浏览器屏幕宽度超过600px时才会有效。

如果我们希望 Media Query作用于特定的设备，而忽略设备上运行的浏览器因为没有最大化的原因而与设备屏幕不一致，可以使用 max-device-width和max-device-width属性来判断设备本身屏幕尺寸。

6、响应时图片设计

因为屏幕的尺寸不同，在加载图片的时候也要根据不同的尺寸进行缩放，同理设置 max-width属性

IE7之前的版本不支持 max-width，要写成

，Wdows平台缩放图片会出现失真，要在css中写入

，余斗还是最推荐根据不同的尺寸加载不同分辨率的图片，这样虽然要做不少图片，用户体验很好。

7、 applicable-device标注

余斗在前面讲过代码适配移动站点时的注意事项时说过applicable-device标注的注意事项，而告知搜索引擎网页为自适应网站的meta标注代码为

8、 mobile type标记

在使用百度站长平台工具提交sitemap时，我们还要做好mobile type标记，主要代码有推火网以下几种，大家根据自己的网站选取

无该mobile type标记 标签表示为PC网页。