成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

rem : web app適配的秘密武器

KaltZK / 2757人閱讀

摘要：有與兩種方式來調(diào)整元素大小的值。如果你的頁面還需要適配到端，那么就老老實實的使用吧。在上面的實現(xiàn)中，我通過判斷設(shè)定了字體大小的范圍來避免上顯示過于夸張。二有的同學(xué)可能對的適配有點誤解。

最近看到這樣一個提問：我有一個750 x 1500尺寸的設(shè)計稿，設(shè)計稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應(yīng)該如何確定按鈕的尺寸呢？。大多數(shù)同學(xué)在回答的時候提到了rem。但我發(fā)現(xiàn)很多同學(xué)對于rem的實際應(yīng)用還存在一點小小的疑問和誤解。

于是問題來了，rem到底是什么？rem是為了解決什么問題而存在的？rem能夠給我們帶來什么樣的便利？帶著這樣的問題，我們一起來總結(jié)一下rem的實踐。剛好工作中有一個移動端頁面的需求要做，就嘗試使用rem完成了一個小小的頁面適配。大家可以點擊這里，查看rem適配demo，

建議大家在chrome的device module下打開，通過切換不同手機的模擬器來查看不同尺寸下的區(qū)別。
rem是什么？

rem是一個相對于根元素字體大小的css單位。與px一樣，他可以用來設(shè)置字體大小，也可以用來設(shè)置長度單位。相對于根元素字體大小是什么意思？

舉個栗子。在頁面中，html元素是根元素，因此我們首先給html設(shè)置一個字體大小

html { font-size: 100px; }

于是，在整個頁面中，就有這樣的換算公式 ： 1rem = 100px

所以如果一個按鈕，有如下的css樣式，就等同于他的寬為100px，高50px.

btn { width: 1rem; height: 0.5rem; }

這就是rem這個知識點的所有真相了。

?。。∈裁?？這就完了？這和px有什么區(qū)別？

對啊，這和px本來就沒有特別的區(qū)別，就是一個尺寸單位嘛！

所以提問的那個同學(xué)拿著750x1500設(shè)計圖來問，當我們設(shè)置為html的字體大小為100px時，
150x50的按鈕應(yīng)該在頁面里面寫什么尺寸？，用px就應(yīng)該寫 75x25，用rem就是 0.75 x 0.25.

真實寬度375px / 設(shè)計圖寬度750px = 按鈕真實寬度 / 設(shè)計圖按鈕寬度150px
==> 按鈕真實寬度 = 75px

又 1rem = 100px;   ==> 75px = 0.75rem

有的時候我們希望在設(shè)計圖直接量出來的尺寸不用除2直接得到rem的值，也就是說量出來是150px，那么用rem表示就是1.5rem。這個時候我們只需要修改html的字體大小為50px即可。那么計算思路就有一點不同。

真實寬度375px / 設(shè)計圖寬度750px = 按鈕真實寬度 / 設(shè)計圖按鈕寬度150px
==> 按鈕真實寬度 = 75px

又 1rem = 50px;   ==> 75px = 1.5rem

因此當設(shè)計圖的尺寸發(fā)生改變時，我們需要根據(jù)上述思路，動態(tài)的調(diào)整html的字體大小，以達到我們想要的rem換算。

rem是為了解決什么問題而存在的？

以iphone各種手機的尺寸來說，iPhone4,5 寬度320px，iPhone6 375px，iPhone6 plus 414px. 如果一個按鈕，固定一個75x25的尺寸，那么就必然會導(dǎo)致在不同尺寸下的相對大小不一樣。這帶來的問題就在于會直接影響到設(shè)計的美觀，可能在iPhone6下，一個完美的設(shè)計圖，到了iPhone5,就變得low很多。 因為，為了讓頁面元素的尺寸能夠在設(shè)備寬度變化的時候也跟著變化，rem就出現(xiàn)了。

我們已經(jīng)知道，rem的相對大小跟html元素的字體大小有關(guān)系。使用rem適配的原理就是我們只需要在設(shè)備寬度大小變化的時候，調(diào)整html的字體大小，那么頁面上所有使用rem單位的元素都會相應(yīng)的變化。 這也是rem與px最大的區(qū)別。

有css與js兩種方式來調(diào)整html元素大小的值。

css方式

html { font-size: calc(100vw / 3.75) }

100vw表示設(shè)備寬度，除以3.75這里是以iphone6 的寬度375px為標準，為了保證html的字體大小為100px。這樣我們在換算的時候，1px 就是0.01rem，就很容易計算。

因為chrome下最小字體大小為12px，所以不能把html的font-size設(shè)置成1px或者10px，100px是我們最好的選擇。

js方式， 原理與css一樣，不過為了避免在一些老舊一點的手機瀏覽器上不支持calc，vm這些屬性，在實際應(yīng)用中使用js是最好的。

!function () {
   function a() {
       var _width;
       var clientWidth = document.documentElement.clientWidth;
       if (clientWidth > 568) {
           _width = 568;
       } else if (clientWidth < 320) {
           _width = 320;
       } else {
               _width = clientWidth;
       }
       // var pageWid = (window.innerWidth > document.querySelector("body").offsetHeight) ? 1136 : 640;
       document.documentElement.style.fontSize = _width / 375 * 100 + "px";
   }
   var b = null;
   document.addEventListener("DOMContentLoaded", function () {
       window.addEventListener("resize", function () {
           clearTimeout(b);
           b = setTimeout(a, 300)
       }, !1);
       a()
   }, false);
}(window);

在實踐中還有一個關(guān)鍵的問題需要處理。就是無論如何js的加載會比css慢，因此如果我們就這樣的話，頁面的元素會有一個很明顯的閃爍過程，因為再js加載進來之前，html的字體大小還沒有達到我們想要的效果。因此通常我們需要在css中，給html的字體大小設(shè)置一個默認值，以弱化這個閃爍的過程。默認值的具體大小需要我們自行根據(jù)設(shè)計圖的尺寸，以及你想要的結(jié)果，通過上面我們介紹的計算思路去得出。

html {
  font-size: 100px;
}
需要注意的地方

一、rem的適用性很有局限，僅僅只能夠用于只在移動端展示的頁面。如果你的頁面還需要適配到pc端，那么就老老實實的使用px吧。在上面的實現(xiàn)中，我通過判斷設(shè)定了html字體大小的范圍來避免pc上顯示過于夸張。

二、有的同學(xué)可能對web的適配有點誤解。web中做適配并不需要考慮什么物理像素啊，dpi等等概念。這些應(yīng)該僅僅只是Android或者ios原生app才會考慮的問題。這些誤會導(dǎo)致許多搞設(shè)計的同學(xué)在給web app做設(shè)計的時候，也丟一張1080 x 1920 的設(shè)計稿過來，真是愁死人了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/79506.html

相關(guān)文章

  • rem : web app適配的秘密武器

    摘要：有與兩種方式來調(diào)整元素大小的值。如果你的頁面還需要適配到端，那么就老老實實的使用吧。在上面的實現(xiàn)中，我通過判斷設(shè)定了字體大小的范圍來避免上顯示過于夸張。二有的同學(xué)可能對的適配有點誤解。 最近看到這樣一個提問：我有一個750 x 1500尺寸的設(shè)計稿，設(shè)計稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應(yīng)該如何確定按鈕的尺寸呢？。大多數(shù)同學(xué)在回答的時候提到了rem。但我發(fā)現(xiàn)很多...

    MageekChiu 評論0 收藏0

  • rem : web app適配的秘密武器

    摘要：有與兩種方式來調(diào)整元素大小的值。如果你的頁面還需要適配到端，那么就老老實實的使用吧。在上面的實現(xiàn)中，我通過判斷設(shè)定了字體大小的范圍來避免上顯示過于夸張。二有的同學(xué)可能對的適配有點誤解。 最近看到這樣一個提問：我有一個750 x 1500尺寸的設(shè)計稿，設(shè)計稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應(yīng)該如何確定按鈕的尺寸呢？。大多數(shù)同學(xué)在回答的時候提到了rem。但我發(fā)現(xiàn)很多...

    since1986 評論0 收藏0

  • css進階

    摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標準的一部分。精簡高效的命名準則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不由...

    import. 評論0 收藏0

  • 移動端web app自適應(yīng)布局探索與總結(jié)

    摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設(shè)計稿為基準等比例設(shè)置。給根節(jié)點設(shè)置一個基礎(chǔ)值，然后頁面的所有元素布局均相對于該值采用單位設(shè)定。 1、困擾多時的問題 在這之前做web app開發(fā)的的時候，在自適應(yīng)方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設(shè)計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

    Benedict Evans 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<