前端07班 王
1躏啰、將網(wǎng)頁修改為百分比布局根據(jù)一個簡易的公式將固定像素寬度轉(zhuǎn)換成對應(yīng)的百分比寬度：目標元素寬度÷ 上下文元素寬度 = 百分比寬度pc端我們定義樣式寬度時一般是：#menu {margin-right: 10px;margin-left:10px;width: 940px;}轉(zhuǎn)換為百分比的menu區(qū)塊的css為：#menu {margin-right: 10px;margin-left: 10px;width: 97.916667% /* 940 ÷ 960 */}
2恋捆、要阻止移動瀏覽器自動調(diào)整頁面大小iOS和Android瀏覽器都基于webkit核心，這兩種瀏覽器以及其他的很多瀏覽器都支持viewport meta元素覆蓋默認的畫布縮放設(shè)置留攒，只需在HTML的<head>標簽中插入一個<meta>標簽药版，<meta>標簽中可以設(shè)置具體的寬度(如像素值)或者縮放比例2.0(設(shè)備實際尺寸的兩倍)，下面是將一個頁面放大到設(shè)備實際尺寸兩倍顯示的meta標簽示例:<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>
3宇智、用em替換px 目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度這個公式也適用于將文字的像素單位轉(zhuǎn)換為相對單位，值得注意的是陆盘，現(xiàn)代瀏覽器的默認文字都是16像素普筹，因此一開始給body標簽應(yīng)用下列任何一條規(guī)則所產(chǎn)生的效果都一樣:font-size: 100%;font-size:16px;font-size: 1em;
4、主要流動布局（fluid grid）的使用“流動布局”指的是各個區(qū)塊的位置都浮動隘马，不是固定不變的太防。.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}這么做的好處是，如果寬度太小酸员，放不下兩個元素蜒车，后面的元素會自動滾動到前面元素的下方，不會在水平方向溢出幔嗦，避免了水平滾動條的出現(xiàn)酿愧，大大提升了用戶的閱讀體驗。另外邀泉，絕對定位（position:absolute）的使用嬉挡，也要非常小心。
