Web培训

热门话题:

自适应网站页面时应注意事项

发布：Web前端培训
来源：框架技术
时间：2015-11-25 18:02

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

根据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度÷ 上下文元素宽度 = 百分比宽度

pc端我们定义样式宽度时一般是：

#menu {

margin-right: 10px;

margin-left:10px;

width: 940px;

}

转换为百分比的menu区块的css为：

#menu {

margin-right: 10px;

margin-left: 10px;

width: 97.916667% /* 940 ÷ 960 */

}
2、要阻止移动浏览器自动调整页面大小
iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的<head>标签中插入一个<meta>标签，<meta>标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

4、用em替换px

   目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是16像素，因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

font-size: 100%;

font-size:16px;

font-size: 1em;

5、要主要流动布局（fluid grid）的使用
“流动布局”指的是各个区块的位置都浮动，不是固定不变的。

.main {float: right;width: 70%;}

.leftBar {float: left;width: 25%;}
这么做的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，绝对定位（position:absolute）的使用，也要非常小心。