- A+
对于好多新手朋友来讲，自适应的布局页面改如何调整？才能最大程度适合搜索引擎蜘蛛的胃口，提高其抓取速度与访问热度。
如下所写牵扯CSS样式部分内容，HTML基础部分，如果你不懂，要多学习才能掌握。
自适应网页代码优化
第一是：如果你要禁止调整页面大小
iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的<head>标签中插入一个<meta>标签，<meta>标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，如下演示的meta标签代码所示:
<meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=yes”/>
假如你不想调整页面大小，那么把user-scalable=yes改为user-scalable=no，如：
<meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=no”/>
第二是：将网页修改为百分比布局的样式
自适应网页不是用尺寸来衡量网页大小的，而是用百分比布局的宽度与高度设计，以百分比为标准。
指定一个百分比宽度：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 */
}
第三是：用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 */
}
第四是：流动样式设计（fluid grid）的应用
“流动设计板式”指的是各个区块的位置都浮动。
.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
这样做的设计好处是，假如宽度比较小，容不下两个元素代，从后面写入的元素会自动滚动到前面元素的下面，不会水平面溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，绝对定位（position:absolute）的使用，也要非常小心。
第五是：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)" 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></script> <![endif]-->
第六是：设计响应式图片
有很多同比缩放图片的技术，其中有不少是简单易行的，比较流行的方法是使用CSS的max-width属性：
img { max-width: 100%;}
老版IE不支持max-width元素，如下演示
img { width: 100%; }
不能让图片在IE下失真的CSS代码：
img { -ms-interpolation-mode: bicubic; }
或者写成JS，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs =
ocument.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
如果自身条件时间较为充分，可以利用自适应布局调整不同的图片，对应不同的浏览器，达到兼容性较好的效果。
将以上内容修改完善之后，再提交至搜索引擎百度收录即可。
更多自适应代码SEO优化，看我上一节讲过的：网页设计简化代码、审美便捷化，如何将SEO优化最大化？
以上内容来自博主使用自适应网页的时候修改整理而成的，参照网友给予的代码稍微做了修改，转载请注明出处。
您可以选择一种方式赞助本站
赏