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

1、 阻止移动浏览器自动调整页面大小

iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewportmeta元素覆盖默认的画布缩放设置，只需在HTML的head标签中插入一个meta标签，meta标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

meta name=”viewport”content=”initial-scale=2.0,width=device-width”/

2、将网页修改为百分比布局

当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏览，而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是css代码不会指定具体像素宽度：width:xxxpx;而是会指定一个百分比宽度：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%

}

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

}

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(屏幕定向:横屏或竖屏)，因此可以通过MediaQuery加载相应的CSS文件.例如，下面代码定义了如果页面通过屏幕呈现，并且屏幕宽度不超过480px,则加载shetland.css

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