移動端適配--今日，你學識咗未吖

標籤：text   層疊樣   原理   cli   作者   式表   var   錯誤   ext   

移動端適配   是我以前開發中思考的最久的一個東西，上網找到的都是用什麼庫 啊架構 啊之類來解決適配問題的。

但經過一段時間的移動開發之後，總算不頭疼這個問題了，以下就是我開發中用到的適配方式，可以說是非常詳細的，希望能幫到需要協助的猿！！

 

第一種方式：（代碼 + 說明）

　　var screenWidth = 螢幕寬度；
　　var designWidth = 設計稿寬度；
　　var fontSize = 字型基礎值；
　　var htmlPX；

 

　參數說明：

　　螢幕寬度 就是指要適配的手機螢幕寬度
　　設計稿寬度 就是指UI稿的寬度
　　字型基礎值 可以隨便設定，但是這個會影響你實際布局的時候值的計算(數學好的當我沒說過)，我一般設定為100
　　htmlPX 就是根節點的字型font-size值

 

　htmlPX 的公式為：

　　screenWidth / designWidth * fontSize = htmlPX;

 

 

　然後媒體查詢就可以寫成這樣了

　　@media only screen and (max-width: screenWidth),
　　only screen and (max-device-width: screenWidth) {
　　　　html,body {
　　　　　　font-size: htmlPX;
　　　　}

　　},

　　注意： 上面的變數全都要換成具體的值再放到裡面的，要是直接複製粘貼過去，除了問題就別找我了。。

 

　　然後在寫css的時候，有px單位的（不考慮border的情況下）都要轉成rem單位，並且數值要除以fontSize(這個最好設定100啦，容易計算；例如我盒子寬度設定150px,做成適配的rem布局就是150/100=1.5rem了)

 

　舉個栗子：

 

　　假如我要做適配，設計稿寬度為750，基礎字型值為100，還有一些其他css,我要適配375,414,320螢幕的手機，那麼我就在css檔案裡面這樣寫：

 

　　

@media only screen and (max-width: 414px),    only screen and (max-device-width: 414px) {        html,body {            font-size: 55.2px;        }            };    @media only screen and (max-width: 375px),    only screen and (max-device-width: 375px) {        html,body {            font-size: 50px;        }            };    @media only screen and (max-width: 320px),    only screen and (max-device-width: 320px) {        html,body {            font-size: 42.66666666666667px;        }            };    div {        width: 1.5rem;        padding: 0.2rem;    }

　　一般來說，寬度最好用百分比這樣肯定不會出問題，如果非要用rem，那就願天主與你同在，阿門！！

第二種方式： （代碼 + 說明）

　1.先設定header裡面的meta標籤：

　　　　

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

　　這個設定有什麼用我就不用說了，這個滿大街都有，移動端必備的代碼！！！

 

　2.在header寫上<script>標籤

　　

<script type="text/javascript"> 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + ‘px‘; </script>

　　我們在寫css的時候可以直接寫rem, 然後數值就寫從設計稿上量出來的px數值再除以100加上rem單位，就搞定收工！！

　上面這段代碼的跟第一種方式原理一樣的，不過第一種方式在電腦上進行調試比較方便，不用每次改變螢幕大小都要重新整理一遍，而第二種方式在電腦上調試的時候就麻煩一點。（雖然只是一個F5而已。。）

　個人認為還是第一種比較好，因為層疊樣式表(css)就是為了改變樣式而產生的，而指令碼(JavaScript)就是為了改變行為方式而產生的，所以適配還是用css來寫比較符合W3C工作者的初衷。

 

　以上僅為個人觀點，但內容目測和實測都可實現具體功能。

　不喜勿噴，，如有錯誤，歡迎指出，必回！！喜歡的就請留下個讚唄~~

 

移動端適配--今日，你學識咗未吖