Rem是如何實現自適應佈局的？

時間 2021-01-30

標籤 css html 前端前端工程師 app iphone ide 佈局測試字體欄目 CSS 简体版

原文原文鏈接

做爲前端工程師的咱們，在h5頁面佈局的過程當中會使用rem佈局，你們都知道rem是相對長度單位，可是做爲前端的咱們該如何去讓rem佈局自適應iphone四、iphone六、iphone六、iphone6plus的呢？css

那咱們都看到天貓在手機網頁端中，是根據手機大小的不同去自適應的，那麼咱們接下來讓咱們本身的h5網頁的頁面自適應手機設備html

1、首先咱們先看一下擁有幾億用戶的淘寶天貓是怎麼作的呢？前端

iphone4前端工程師

iphone6app

iphone 6 plusiphone

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

2、使用在本身的項目中佈局

咱們使用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自適應佈局的研究和理解的總結，但願對你們有幫助，我會持續進步更新個人知識庫，嘻嘻*_*