自适应站点如何做到对百度友好作者：无忧云
自习惯也叫呼应式，指能够主动辨认屏幕宽度、并做出相应调整的网页规划。现在被越来越多的站点所运用。一起百度也揭露声称鼓舞咱们用HTML5技能打造在PC站和移动站都能让用户有杰出体会的站点。那么自习惯站点在代码上需求做出哪些调整能够对百度愈加友爱呢？咱们来看看皮皮鲁网SEO负责人蒋飞的共享。 #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网页
|
