span 理解 radi brush 研究 工程師 結果 -s sha

作為前端工程師的我們,在h5頁面布局的過程中會使用rem布局,大家都知道rem是相對長度單位,但是作為前端的我們該如何去讓rem布局自適應iphone4、iphone6、iphone6、iphone6plus的呢?


那我們都看到天貓在手機網頁端中,是根據手機大小的不一樣去自適應的,那麽我們接下來讓我們自己的h5網頁的頁面自適應手機設備


一、首先我們先看一下擁有幾億用戶的淘寶天貓是怎麽做的呢?


iphone4

技術分享圖片


iphone6


技術分享圖片


iphone 6 plus

技術分享圖片


我們看到整個頁面中改變了根元素html中的屬性font-size的大小,就做到讓按鈕中字體的大小發生變化。


二、使用在自己的項目中

我們使用rem在頁面中做一個按鈕:

<style>
    html{
        font-size:32px;
    }
    .btn {
        height: 1.2rem;
        line-height: 1.2rem;
        font-size: 0.43rem;
        margin:0 2rem;
        background: #06c;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
        text-align: center;
        letter-spacing:0.2rem;
    }
</style>
<body>
  <div class="btn">確定</div>
</body>

接著有兩種方案

我們可以想淘寶一樣,通過使用js去控制根元素中html的font-size的大小,進而改變按鈕的大小。

也可以使用自己的知識點,使用css媒體查詢去設置頁面中根元素的font-size屬性。


我這裏就介紹使用css媒體查詢設置font-size的屬性,

@media screen and (min-width: 310px) {
    html{
        font-size:34px;
    }
}
@media screen and (min-width: 360px) {
    html{
        font-size:37.5px;
    }
}
@media screen and (min-width: 410px) {
    html{
        font-size:41.4px;
    }
}

最後我們可以去谷歌中去測試,結果如下圖

技術分享圖片


這就是我對rem自適應布局的研究和理解的總結,希望對大家有幫助,我會持續進步更新我的知識庫,嘻嘻*_*


Rem是如何實現自適應布局的?