自适应站点如何做到对百度友好？.pdfVIP

云客网 您网站的流量加油站 自适应站点如何做到对百度友好？ 文/皮皮鲁网SEO 负责人蒋飞 自适应也叫响应式，指可以自动识别屏幕宽度、并做出相应调整的网页设计。目 前被越来越多的站点所使用。同时百度也公开宣称鼓励大家用HTML5技术打造 在PC 站和移动站都能让用户有良好体验的站点。那么自适应站点在代码上需要 做出哪些调整可以对百度更加友好呢？ 一、什么样的网站适合做自适应 自适应网页设计(ResponsiveWeb Design)是指可以自动识别终端设备屏幕的大小 从而做出相应调整的网页设计方法。这种网页设计方法完美解决了如何在不同大 小的网络设备上呈现同样的网页效果。大家公认自适应至少有4 个好处:提升用 户体验；PC 端和移动端SEO保持一致；避免重复内容和出错内容；链接统一。 而自适应比较明显的缺陷是，开发成本比较高，尤其是要构建包含额外编程的复 杂的自适应网站，所需的时间会比较长。如果网站需求较简单，有许多开源模板 可供选择。 对于已经比较成熟PC 网站来说，如果要实现全站的自适应，有可能需要推掉原 来所有的代码进行重构，时间和技术成本都比较大，而且如果一个网站有多个 portal （入口），会大大增加架构设计的复杂度，所以现在有很多网站只在移动 端实现了响应式布局设计。 二、自适应网页代码上需要做出哪些调整 1、阻止移动浏览器自动调整页面大小 SEO排名 / 云客网 您网站的流量加油站 iOS和Android 浏览器都基于webkit 核心，这两种浏览器以及其他的很多浏览器 都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML 的head标 签中插入一个meta标签，meta标签中可以设置具体的宽度(如像素值)或者缩 放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍 显示的meta 标签示例: metaname ”viewport”content ”initial-scale 2.0,width device-width”/ 2、将网页修改为百分比布局 当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏 览，而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵 活修正样式，具体来讲，就是css代码不会指定具体像素宽度：width:xxxpx;而 是会指定一个百分比宽度：width:xx%;或者直接就是width:auto;这里大家可以根 据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度÷ 上 下文元素宽度 百分比宽度 例如：  div id ”wraper”  divid “header”/div  /div  #wrapper {  margin-right: auto;  margin-left: auto;  width: 960px;  }  #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 SEO排名 / 云客网 您网站的流量加油站 同样，目标元素宽度 ÷ 上下文元素宽度 百分比宽度这个公式也适用于将文 字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是16 像素，因此一开始给body 标签应用下列任何一条规则所产生的效果都一样:  font-size: 100%;  font-size:16px;  font-size: 1em;