自适应也叫呼应式，指能够主动辨认屏幕宽度、并做出相应调整的网页规划。现在被越来越多的站点所运用。一起百度也揭露声称 鼓舞我们用HTML5技能打造在PC站和移动站都能让用户有杰出体会的站点。那么自适应站点在代码上需求做出哪些调整能够对百度更 加友爱呢? 一、什么样的网站适合做自适应 自适应网页规划(Responsive Web Design)是指能够主动辨认终端设备屏幕的巨细然后做出相应调整的网页规划办法。这种网页 规划办法完美处理了如安在不同巨细的网络设备上呈现相同的网页作用。我们公认自适应至少有4个优点:提高用户体会;PC端和移 动端搜索引擎优化保持一致;防止重复内容和犯错内容;链接一致。 而自适应比较显着的缺陷是，开发本钱比较高，尤其是要构建包含额定编程的杂乱的自适应网站，所需的时刻会比较长。如果网站 需求较简略，有许多开源模板可供挑选。 关于现已比较老练PC网站来说，如果要完成全站的自适应，有可能需求推掉本来所有的代码进行重构，时刻和技能本钱都比较大， 而且如果一个网站有多个portal(进口)，会大大增加架构规划的杂乱度，所以现在有许多网站只在移动端完成了呼应式布局规划 。 二、自适应网页代码上需求做出哪些调整 1、 阻挠移动阅览器主动调整页面巨细 iOS和Android阅览器都基于webkit中心，这两种阅览器以及其他的许多阅览器都支撑viewport meta元素掩盖默许的画布缩放设 置，只需在HTML的标签中刺进一个标签，标签中能够设置详细的宽度(如像素值)或许缩放份额2.0(设备实践尺 寸的两倍)，下面是将一个页面扩大到设备实践尺度两倍显现的meta标签示例: 2、将网页修改为百分比布局 当某个阅览窗口处于媒体查询固定的规模之外，网页就需求水平翻滚才能完好阅览，而经过百分比布局能够页面元素依据窗口 巨细在一个又一个媒体查询之间灵活批改款式，详细来讲，就是css代码不会指定详细像素宽度：width:xxx px;而是会指定一个百 分比宽度：width:xx%;或许直接就是width:auto;这儿我们能够依据一个简易的公式将固定像素宽度转换成对应的百分比宽度：方针 元素宽度 ÷ 上下文元素宽度 = 百分比宽度 例如： #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 相同，方针元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是， 现代阅览器的默许文字都是16像素，因而一开始给body标签运用下列任何一条规矩所发生的作用都一样: font-size: 100%; font-size:16px; font-size: 1em;例如某网站网站标题相应的款式: #logo { display: block; padding-top: 75px; color: #0d0c0c; font-family: Arial; font-size: 48px; } 修改后的款式如下: #logo{ display: block; padding-top: 75px; color: #0d0c0c; font-family: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 相同能够创立多个款式表，以适应不同设备或许不同分辨率的宽度规模，当然更有用的做法是将多个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,然后在页面中调用它即可，例如: 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标签就行： 表明页面一起适合在移动设备和PC上进行阅览。 2，在运用百度站长渠道链接提交东西的sitemp进行提交时，要做mobile type符号，详细取值： 其他网页取值如下： ：移动网页 ：移动网页 ：代码适配 无该上述标签表明为PC网页 霸屏宝是优秀的品牌推广服务。本文版权为霸屏宝所有，欢迎转载!请注明出处链接地址!