前端07班 王
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”/>
3、用em替换px 目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是16像素，因此一开始给body标签应用下列任何一条规则所产生的效果都一样:font-size: 100%;font-size:16px;font-size: 1em;
4、主要流动布局（fluid grid）的使用“流动布局”指的是各个区块的位置都浮动，不是固定不变的。.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}这么做的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，绝对定位（position:absolute）的使用，也要非常小心。
