自适应也称为响应表达式，是一种可以自动识别屏幕宽度并进行相应调整的网页设计。 目前正在越来越多的网站上使用。 百度还公开表示，将鼓励用户使用HTML5技术在PC工作站和移动工作站上创建让用户体验更好的网站。 那么，自适应网站在代码上需要做哪些调整呢？ 你能对百度更好吗？ 来看看皮尔网SEO负责人大胆的火分享吧。
一、什么样的网站适合适应
自适应网页设计(Responsive Web Design )是一种能够自动识别终端设备的屏幕尺寸并进行相应调整的网页设计方法。 这种网页设计方法完美地解决了在不同大小的网页设备上呈现相同网页效果的方法。 改进了公认的适应至少有四个好处的：用户体验； PC端和移动端的SEO一致； 避免重复内容和错误内容的链接统一。
摘要HTML5具有以下优点： 1、提高可用性，改善用户友好体验； 2、有几个新标签可以帮助开发者定义重要内容3、可以给网站带来更多多媒体元素(视频和音频) 4、可以很好地替代FLASH和Silverlight； 5、在参与网站捕获和索引时，对SEO非常友好； 6、多用于移动APP和游戏7、可移植性好。
自适应的明显缺点是开发成本高，特别是构建包含其他编程的复杂自适应站点需要花费时间。 如果网站需求很简单，可以选择很多开源模板。
对于已经成熟的PC站点，为了实现全工作站的自适应，必须推开原始的所有代码进行重构，时间和技术成本可能很高。 此外，一个站点上有多个门户会大大增加体系结构设计的复杂性。 因此，现在有很多网站只在移动端实现响应布局设计。
二、自适应网络代码需要哪些调整？
1、阻止移动浏览器自动调整页面大小
iOS和安卓浏览器基于webkit核心。 这些浏览器和许多其他浏览器支持视口元元素复盖默认的画布缩放设置。 只需在HTML头部选项卡中插入元选项卡，即可将选项卡设置为特定宽度(例如像素值)或缩放2.0 (设备实际大小的两倍)。 以下是将一个页面放大到设备的方法
metaname=" viewport " content=" initial-scale=2.0，width=device-width”/"
2、将网页修改为百分比布局
如果某个浏览窗口不在媒体查询的固定范围内，则网页必须水平滚动才能完全浏览，但百分比使页面元素可以根据窗口大小在一个接一个的媒体查询之间灵活修改样式。 具体而言，css代码不指定特定的像素宽度。 width:xxx px； 相反，width:xx%； 或直接在width :自动； 在此，可以根据简单的公式将固定像素宽度转换为相应的百分比宽度。 目标元素宽度上下文元素宽度=百分比宽度
例如：
div id=”wraper "
divid=“header”
#wrapper {
margin-right :自动；
margin-left :自动；
width: 960px；
}
#header {
玛姬- right : 10px；
玛格琳- left :10 px；
width: 940px；
}
转换为百分比的header块的css如下：
#header {
玛姬- right : 10px；
玛格琳- left : 10px；
width :97.916667 %/* 940960 * /
}
3、用em取代px
同样，目标元素宽度上下文元素宽度=百分比宽度表达式也适用于将文本的像素单位转换为相对单位。 值得注意的是，由于现代浏览器的默认文本为16像素，因此首先将以下规则之一应用于主体标签可以产生：的效果
font-size: 100%；
font-size:16px；
font-size: 1em；
例如，与某个站点站点标题对应的样式：
#徽标{
显示： block；
padding-top: 75px；
color: #0d0c0c；
字体系列： arial；
font-size: 48px；
}
修改后的样式为：
#徽标{
显示： block；
padding-top: 75px；
color: #0d0c0c；
字体系列： arial；
font-size:3em /* 48 16 */
}
4、使用流布局(fluid grid )
“流布局
”指的是各个区块的位置都浮动，不是固定不变的。.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
这么做的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，绝对定位(position:absolute)的使用，也要非常小心。
5、Media Query技术的使用
在自适应设计的技术中，css3支持css2.1定义的媒体类型，同时添加了很多涉及媒体类型的功能属性，包括max-width(最大宽度)，device-width(设备宽度，orientation(屏幕定向:横屏或竖屏)，因此可以通过Media Query加载相应的CSS文件. 例如，下面代码定义了如果页面通过屏幕呈现，并且屏幕宽度不超过480px,则加载shetland.css
< link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" rel="external nofollow" href="shetland.css" />
同样可以创建多个样式表，以适应不同设备或者不同分辨率的宽度范围，当然更有效的做法是将多个Media Query整合在一个样式表文件中:
@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
上面的代码中定义的样式类只有在浏览器屏幕宽度超过600px时才会有效。
因此，使用min-width和max-width可以同时判断屏幕尺寸与浏览器实际宽度，如果希望通过Media Query作用于某种特定设备，但忽略在其上运行的浏览器是否由于没有最大化尺寸与设备屏幕尺寸不一致，则可以使用max-device-width和max-device-width属性来判断设备本身屏幕尺寸。
Media Query不是唯一的解决方案，同样可以通过Javascript来实现自适应设计，特别是某些旧浏览器无法完美支持CSS3的Media Query时，它可以作为备选方案。当然，我们仍然能借助专业的Javascript库来帮助旧浏览器(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用方法:下载css3-mediaqueries.js,然后在页面中调用它即可，例如:
< !--[if lt IE 9]>
< script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js>
< ![endif]-->
6、 设计响应式图片
有很多同比缩放图片的技术，其中有不少是简单易行的，比较流行的方法是使用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标签就行：
< meta name="applicable-device" content="pc,mobile">
表示页面同时适合在移动设备和PC上进行浏览。
2， 在使用百度站长平台链接提交工具的sitemp进行提交时，要做mobile type标记，具体取值：
< mobile:mobile type="pc,mobile"/>
其他网页取值如下：
< mobile:mobile/> ：移动网页
< mobile:mobile type="mobile"/> ：移动网页
< mobile:mobile type="htmladapt"/>：代码适配
无该上述标签表示为PC网页