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

來源:互聯網
上載者:User

標籤: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工作者的初衷。

 

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

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

 

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

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。