欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Rem是如何實現(xiàn)自適應布局的？

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

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供綏化網(wǎng)站建設、綏化做網(wǎng)站、綏化網(wǎng)站設計、綏化網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、綏化企業(yè)網(wǎng)站模板建站服務，十載綏化做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

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

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


iphone4

Rem是如何實現(xiàn)自適應布局的？

iphone6

Rem是如何實現(xiàn)自適應布局的？

iphone 6 plus

Rem是如何實現(xiàn)自適應布局的？


我們看到整個頁面中改變了根元素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的大小，進而改變按鈕的大小。

② 也可以使用自己的知識點，使用css媒體查詢?nèi)ピO置頁面中根元素的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是如何實現(xiàn)自適應布局的？


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

標題名稱：Rem是如何實現(xiàn)自適應布局的？
分享URL：http://www.chinadenli.net/article46/gsjehg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、企業(yè)網(wǎng)站制作、商城網(wǎng)站、小程序開發(fā)、ChatGPT、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設