溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Rem是如何實(shí)現(xiàn)自適應(yīng)布局的？

發(fā)布時間：2020-06-16 13:43:54 來源：網(wǎng)絡(luò) 閱讀：6511 作者：小佳怡 欄目：web開發(fā)

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


那我們都看到天貓在手機(jī)網(wǎng)頁端中，是根據(jù)手機(jī)大小的不一樣去自適應(yīng)的，那么我們接下來讓我們自己的h6網(wǎng)頁的頁面自適應(yīng)手機(jī)設(shè)備


一、首先我們先看一下?lián)碛袔變|用戶的淘寶天貓是怎么做的呢？


iphone4

Rem是如何實(shí)現(xiàn)自適應(yīng)布局的？


iphone6


Rem是如何實(shí)現(xiàn)自適應(yīng)布局的？


iphone 6 plus

Rem是如何實(shí)現(xiàn)自適應(yīng)布局的？



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


二、使用在自己的項目中

我們使用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的大小，進(jìn)而改變按鈕的大小。

② 也可以使用自己的知識點(diǎn)，使用css媒體查詢?nèi)ピO(shè)置頁面中根元素的font-size屬性。


我這里就介紹使用css媒體查詢設(shè)置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;
    }
}

最后我們可以去谷歌中去測試，結(jié)果如下圖

Rem是如何實(shí)現(xiàn)自適應(yīng)布局的？


這就是我對rem自適應(yīng)布局的研究和理解的總結(jié)，希望對大家有幫助，我會持續(xù)進(jìn)步更新我的知識庫，嘻嘻*_*


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手