常見的手機站注意事項

標籤：

相信很多剛開始寫手機介面的同學都要面對頁面自適應的問題，當然解決方案很多，比如：百分比布局，彈性布局flex，響應式布局……這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案，以及要注意的一些事情。 1，head裡邊加入代碼：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

（H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面） 這段代碼的幾個參數解釋：width = device-width：寬度等於當前裝置的寬度
initial-scale：初始的縮放比例（預設設定為1.0）
minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）
maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）  第一種寫法：

html,body{font-size: 62.5% } 各大主流瀏覽器的fong-size:1rem=16px;這是預設的瀏覽器；  後邊的布局按照正常的寫法即可

 

 第二種寫法：rem布局非常簡單，首頁你只需在頁面引入這段原生js代碼就可以了

<script type=”text/javascript”>(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) 1，用rem布局，需要先設定html{ font-size:100px;}，然後px/100 2，在rem布局中，頁面中模組間距離一般為0.2rem。字型的大小一般分為四個檔       次 0.2rem, 0.24rem ,0.28rem, 0.32rem。 3，背景圖片平鋪記得加：{background-size: 100% 100%;} 數字可以根據需要設定4，頁面中的圖片：{width: 100%; display: block;height: 100%;} 需要這樣來設定 5,   寬高最好採用100%來做 6，配合媒體查詢來設定不同的裝置裡的字型大小    

 a,  簡寫文法@media (min-width:800px) { … } 當頁面大於800px的時候執行它裡邊的CSSb, 複雜運算式@media (min-width:800px) and (max-width:1200px) { … } 當頁面大於800px，小於1200px的時候執行它裡邊的CSSc, 高度和寬度媒體查詢@media (min-width:800px) and (min-height:400px) { … } 當頁面寬度大於800px，高度大於400px的時候執行它裡邊的CSS

 

第三種寫法可採用彈性盒子模型來做，下一章節再講解

常見的手機站注意事項