ios 正则获取img标签 老铁SEO-《移动站点对百度友好全解》(6)

link rel=stylesheet type=text/css media=screen and(max-device-width: 480px) href=shetland.css /

同样可以创建多个样式表，以适应不同设备或者不同分辨率的宽度范围，当然更有效的做法是将多个MediaQuery整合在一个样式表文件中:

@media only screen and (min-devece-width: 320px) and(max-device-width: 480px) {

}

@media screen and (min-width: 600px) {

.hereIsMyClass {

width: 30%;

float: right;

}

上面的代码中定义的样式类只有在浏览器屏幕宽度超过600px时才会有效。

因此，使用min-width和max-width可以同时判断屏幕尺寸与浏览器实际宽度，如果希望通过MediaQuery作用于某种特定设备，但忽略在其上运行的浏览器是否由于没有最大化尺寸与设备屏幕尺寸不一致，则可以使用max-device-width和max-device-width属性来判断设备本身屏幕尺寸。

MediaQuery不是唯一的解决方案，同样可以通过Javascript来实现自适应设计，特别是某些旧浏览器无法完美支持CSS3的MediaQuery时，它可以作为备选方案。当然，我们仍然能借助的Javascript库来帮助旧浏览器(IE5 ,Firefox 1,Safari 2等)支持CSS3的MediaQueries.使用方法:下载css3-mediaqueries.js,然后在页面中调用它即可，例如:

!--[if lt IE 9]

scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js/script

![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_r(img

imgSizer.collate(imgs);

});

如果有条件的话，最好能根据屏幕的不同大小，加载不同分辨率的图片。

三、 自适应站点对百度友好的关键

1，applicable-device标注应该怎么写

有了自适应设计的网页，还要照顾到对百度友好的设计，即告诉百度“我是自适应页面”方便百度进行识别校验。方法也很简单，只要在上面viewport标签下面再添加一个applicable-device标签就行：

meta name=applicable-device content=pc,mobile

表示页面同时适合在移动设备和PC上进行浏览。

2， 在使用百度站长平台链接提交工具的sitemp进行提交时，要做mobile type标记，具体取值：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-69856-6.html