自适应网站做哪些调整对于百度友好？

西安做网站小编最近在研究自适应，它成为响应式，可以自动识别屏幕的宽度、并且自动做出调整的网页设计，用的当然是html5代码技术写出来的，无论在pc或者移动上都能有很好的浏览模式，这样的站点也是以后的一种趋势，但是代码上要如何调整才能对于百度是比较友好的那？

一、什么样的网站适合做自适应

自适应网页设计是指可以自动识别终端设备屏幕的大小从而做出相应调整的网页设计方法。这种网页设计方法完美解决了如何在不同大小的网络设备上呈现同样的网页效果。大家公认自适应至少有4个好处:提升用户体验；PC端和移动端SEO保持一致；避免重复内容和出错内容；链接统一。

而自适应比较明显的缺陷是，开发成本比较高，尤其是要构建包含额外编程的复杂的自适应网站，所需的时间会比较长。如果网站需求较简单，有许多开源模板可供选择。

二、自适应网页代码上需要做出哪些调整

1、 阻止移动浏览器自动调整页面大小

iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

2、将网页修改为百分比布局

具体来讲，就是css代码不会指定具体像素宽度而是会指定一个百分比宽度：width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度÷ 上下文元素宽度 = 百分比宽度

如：总体大的框架为96px，里面包含的一个元素#header {margin-right: 10px;margin-left:10px;width: 940px;}

转换为百分比的header区块的css为：

#header {margin-right: 10px;margin-left: 10px;width: 97.916667% /* 940 ÷ 960 */}

3、用em替换px

同样，目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是16像素，因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

body｛font-size: 100%;font-size:16px;font-size: 1em;｝

例如某网站网站标题相应的样式:

#logo {font-family: Arial;font-size: 48px;}

修改后的样式如下:

#logo{font-family:Arial;font-size:3em /* 48 ÷ 16 */}

4、流动布局（fluid grid）的使用

“流动布局”指的是各个区块的位置都浮动，不是固定不变的。

.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}

这么做的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，绝对定位（position:absolute）的使用，也要非常小心。很容易比例不太协调。

5、设计响应式图片:max-width: 100%;

有很多同比缩放图片的技术，其中有不少是简单易行的，比较流行的方法是使用CSS的max-width属性：img { max-width: 100%;}，老版本的IE不支持max-width，所以只好写成：img { width: 100%; }此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：有的很是模糊，就可以用下面的代码img { -ms-interpolation-mode: bicubic; }或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {var imgs =ocument.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);});如果有条件的话，最好能根据屏幕的不同大小，加载不同分辨率的图片。

三、自适应站点对百度友好的关键

1，applicable-device标注应该怎么写

有了自适应设计的网页，还要照顾到对百度友好的设计，即告诉百度“我是自适应页面”方便百度进行识别校验。方法也很简单，只要在上面viewport标签下面再添加一个applicable-device标签就行：表示页面同时适合在移动设备和PC上进行浏览。

2，在使用百度站长平台链接提交工具的sitemp进行提交时，要做mobile type标记，具体取值：其他网页取值如下： 

：移动网页 ：移动网页 ：代码适配