手機端頁面自適應—rem佈局
寫手機端頁面的時候要在meta加入,下面程式碼:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
name=”viewport” 說明此meta標籤定義視口的屬性
initial-scale=1.0 意思是將頁面不放大,還是1.0
width=device-width 告訴瀏覽器頁面的寬度等於裝置寬度
user-scalable=no 禁止使用者縮放
注意:絕不是每個地方都要用rem,rem只適用於固定尺寸!
比如在底部導航,平分螢幕寬度等地方,你必須使用百分比或者flex才能完美佈局!
rem佈局非常簡單,首頁你只需在頁面引入下面這段js程式碼即可:
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
這是rem佈局的核心程式碼,這段程式碼的大意是:
如果頁面的寬度超過了640px,那麼頁面中html的font-size恆為100px,否則,頁面中html的font-size的大小為:100 * (當前頁面寬度 / 640)
為什麼是640px?
對於手機螢幕來說,640px的頁面寬度是一個安全的最大寬度,保證了移動端頁面兩邊不會留白。注意這裡的px是css邏輯畫素,與裝置的物理畫素是有區別的。如iPhone 5使用的是Retina視網膜螢幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以裝置畫素數為640 x 1136px,而它的CSS邏輯畫素數為320 x 568px。
如果要切移動端頁面,你可以先把效果圖寬度等比例縮放到640px,很好用。
2.為什麼要設定html的font-size?
rem就是根元素(即:html)的字型大小。html中的所有標籤樣式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大膽的用rem作單位。
注:我們把html的font-size設為100px(1rem = 100px),為的是換算起來簡單
根據上面的js程式碼,如果頁面寬度低於640px,那麼頁面中html的font-size也會按照(當前頁面寬度/640)的比例變化。這樣,頁面中凡是應用了rem的作尺寸單位的元素都會隨著頁面變化而等比例縮放了!
為什麼不一開始把html的font-size設為1px呢?
因為瀏覽器一般都有最小字型限制,比如谷歌瀏覽器,最小中文字型就是12px,所以實際上沒有辦法讓1rem=1px。
專案實踐
專案中頁面中模組間距離一般為0.2rem。字型的大小一般分為四個檔次 0.2rem 0.24rem 0.28rem 0.32rem。
我們移動端頁面效果圖的寬度都定在了640px。於是我在專案中,最外層的div樣式就設定成了:
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
所有的元素都可以寫在這個div中了,於是就可以開始寫樣式了
rem佈局中,如果有個元素需要水平居中固定到頁面底部,你會怎麼設定它的樣式呢。
我是這樣做的,前提是這個元素還是在前面說的最外層水平居中的大div中,樣式如下
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
max-width: 640px;
min-width: 320px;