頁面在移動端不一樣屏幕下自適應的嘗試和心得之一

 

寫在前面

如今手機發展迅猛，屏幕大小不一，在剛剛作手機端項目的時候，頁面的自適應就成了一個難題。首先，使用px確定是行不通的，那麼我剛開始用的是em，可是隨着項目的深刻，em的缺陷就暴露無遺了，我總結有如下兩點：

1.em單位基準值的肯定及換算

em是相對長度單位。相對於當前對象內文本的字體尺寸。

上面是百度到的對em的定義，若是你沒有對當前元素設置font-size屬性，那麼它就會默認繼承其父級元素的font-size屬性。可想而知，當html結構層層嵌套的時候，當前元素em的基準值是多少以及以後的換算會是一件很煩的事，工做效率很低。

2.em單位的基準是當前元素字體大小而非屏幕寬度

咱們所謂的自適應，應當是根據設備屏幕寬度適應，而em單位歸根究底，它的基準是當前元素字體大小，而不是屏幕的寬度。

---

 

rem的使用

那麼很天然的，就學習到了使用rem這個單位。rem是css3中的一個新屬性，官方對它的表述是「font size of the root element」。翻譯過來就是相對根元素的字體大小的單位，和em相同，它也是一個相對單位，但和em不一樣的是，它是相對於根元素的。這個特性決定了，利用它可使網頁等比例適配全部屏幕，能夠說是web app製做的利器。

關於rem其實用法有不少，但我在開始的時候使用了很愚蠢的一種，當時有這麼一個項目，只要求移動端ios手機設備的適配。因此我就寫了如下的一套media query

html {
    font-size: 20px;
}

@media screen and (max-width: 320px) {
    html {
        font-size: 17px !important;
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 26.6667px !important;
    }
}    

當時的設計稿是750的，也就是基於iphone6設計的。我這種寫法的缺點其實就一目瞭然了，首先，侷限性很強，就是專門給ios手機作的。再一個，換算很累，rem值等於設計值除以40，工做效率可想而知。因此如今回頭來看，確實比較蠢。。。因而我就去請教百度了。

我找到了網友流雲諸葛的這一篇博客  從網易與淘寶的font-size思考前端設計稿與工做流

文章很好的總結了網易以及淘寶的一些作法，其中網易的作法，就能夠比較好的解決我以前代碼的兩個缺點，代碼以下：

// 根據不一樣設備的屏幕寬度，設置根元素font-size
// 以設計稿750寬爲例
// 這樣rem的值就等於設計稿值除以100

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

而後我又看到了淘寶的方案，它還給咱們提供了一個開源的解決方案  github地址

淘寶的作法不光動態設置根元素font-size，還經過縮放viewport來達到效果。我後來去看了源碼，以爲這套方案很是的不錯，下一篇博客就準備講一講淘寶的這套方案。