快捷導(dǎo)航

JavaScript使用rem實(shí)現(xiàn)移動(dòng)頁(yè)面響應(yīng)式

更新時(shí)間：2025年04月29日 08:40:17 作者：天天扭碼

在當(dāng)今的移動(dòng)互聯(lián)網(wǎng)時(shí)代,確保網(wǎng)頁(yè)在各種移動(dòng)設(shè)備上都能完美顯示是至關(guān)重要的,響應(yīng)式設(shè)計(jì)是實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵技術(shù)之一,而使用 rem 單位是實(shí)現(xiàn)移動(dòng)端響應(yīng)式頁(yè)面的一種有效方法,本文將詳細(xì)介紹如何使用 rem 單位來(lái)創(chuàng)建響應(yīng)式的移動(dòng)端頁(yè)面,需要的朋友可以參考下

什么是 rem 單位

rem（root em）是一個(gè)相對(duì)單位，它相對(duì)于根元素（即元素）的字體大小。例如，如果元素的字體大小設(shè)置為 16px，那么 1rem 就等于 16px；如果元素的字體大小變?yōu)?20px，那么 1rem 就等于 20px。這種相對(duì)性使得 rem 單位在實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)時(shí)非常有用，因?yàn)槲覀兛梢酝ㄟ^(guò)動(dòng)態(tài)改變根元素的字體大小來(lái)調(diào)整整個(gè)頁(yè)面的布局。

為什么選擇 rem 單位進(jìn)行移動(dòng)端響應(yīng)式設(shè)計(jì)

在移動(dòng)端開(kāi)發(fā)中，我們通常會(huì)避免使用固定的像素單位（px），因?yàn)椴煌O(shè)備的屏幕尺寸和分辨率差異很大。使用 px 單位可能會(huì)導(dǎo)致頁(yè)面在某些設(shè)備上顯示過(guò)大或過(guò)小。而 rem 單位可以根據(jù)根元素的字體大小進(jìn)行自適應(yīng)調(diào)整，從而確保頁(yè)面在不同設(shè)備上都能保持一致的布局和視覺(jué)效果。

設(shè)計(jì)稿與 rem 的換算關(guān)系

在實(shí)際開(kāi)發(fā)中，我們通常會(huì)拿到一份設(shè)計(jì)稿，假設(shè)設(shè)計(jì)稿的寬度為 750px。為了方便換算，我們可以將 10rem 對(duì)應(yīng)設(shè)計(jì)稿的 750px，那么 1rem 就等于 75px。也就是說(shuō)，當(dāng) 元素的字體大小設(shè)置為 75px 時(shí)，我們可以直接根據(jù)設(shè)計(jì)稿上的尺寸進(jìn)行 rem 換算。

例如，設(shè)計(jì)稿上一個(gè)元素的寬度為 150px，那么在代碼中我們可以將其寬度設(shè)置為 2rem（150px / 75px = 2rem）。

動(dòng)態(tài)設(shè)置根元素字體大小

為了實(shí)現(xiàn)頁(yè)面的響應(yīng)式布局，我們需要根據(jù)設(shè)備的屏幕寬度動(dòng)態(tài)調(diào)整根元素的字體大小?？梢酝ㄟ^(guò) JavaScript 來(lái)實(shí)現(xiàn)這一點(diǎn)。以下是一個(gè)示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 rem 實(shí)現(xiàn)響應(yīng)式頁(yè)面</title>
    <script>
        // 立即執(zhí)行函數(shù)
        (function(){
            function calc(){
                // 獲取設(shè)備屏幕的寬度
                const w = document.documentElement.clientWidth;
                console.log(w);
                // 750 是設(shè)計(jì)稿的寬度
                document.documentElement.style.fontSize = 75 * (w / 750) + 'px';
            }
            // 首次加載時(shí)計(jì)算并設(shè)置根元素字體大小
            calc();
            // 當(dāng)窗口大小改變時(shí)重新計(jì)算并設(shè)置根元素字體大小
            window.onresize = function(){
                calc();
            }
        })();
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- 使用 rem 單位設(shè)置元素的寬度和高度 -->
    <div style="width: 10rem;height: 2rem;background-color: red;"></div>
    <!-- 換行符為 0 -->
    <div style="font-size: 0;">
        <div style="width: 5rem;height: 2rem;background-color: green;display: inline-block;font-size: 20px;color: white;">111</div>
        <div style="width: 5rem;height: 2rem;background-color: blue;display: inline-block">222</div>
    </div>
</body>
</html>

代碼解釋?zhuān)?/h3>
立即執(zhí)行函數(shù)：使用立即執(zhí)行函數(shù)來(lái)封裝代碼，避免全局變量污染。
calc 函數(shù)：該函數(shù)用于計(jì)算并設(shè)置根元素的字體大小。首先獲取設(shè)備屏幕的寬度 w，然后根據(jù)設(shè)計(jì)稿的寬度 750px 計(jì)算出根元素的字體大小，公式為 75 * (w / 750)。
首次加載：頁(yè)面首次加載時(shí)，調(diào)用 calc 函數(shù)計(jì)算并設(shè)置根元素的字體大小。
窗口大小改變：當(dāng)窗口大小改變時(shí)，監(jiān)聽(tīng) resize 事件，再次調(diào)用 calc 函數(shù)重新計(jì)算并設(shè)置根元素的字體大小。

實(shí)際應(yīng)用示例

下面是一個(gè)更復(fù)雜的實(shí)際應(yīng)用示例，展示了如何使用 rem 單位實(shí)現(xiàn)一個(gè)響應(yīng)式的商品列表頁(yè)面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>響應(yīng)式商品列表頁(yè)面</title>
    <script>
        (function(){
            function calc(){
                const w = document.documentElement.clientWidth;
                console.log(w);
                document.documentElement.style.fontSize = 75 * (w / 750) + 'px';
            }
            calc();
            window.onresize = function(){
                calc();
            }
        })();
    </script>
    <style>
        *{
            margin: 0;
            padding: 0; 
        }
        ul,li{
            list-style: none;
        }
        html,body{
            height: 100%;
        }
        .item-section{
            min-height: 100%;
            background-color: rgb(205, 3, 3);
            position: relative;
            font-size: 24px;
        }
        .item-section_header img{
            width: 10rem;
        }
        .item-section ul{
            padding: 0.133333rem;
        }
        .flag{
            display: table;
            width: 100%;
            margin-bottom: 1px;
            background-color: #fff;
        }
        .flag .flag-item{
            display: table-cell;
            padding: 0.16rem 0;
            vertical-align: top;
            background-color: #fff;
        }
        .flag .flag-item.figure{
            width: 2.3467em;
            height: 2.3467em;       
        }
        .flag .flag-item.figure img{
            width: 2.3467em;
            height: 2.3467em;       
        }
        .flag .flag-title a{
            font-size: 14px;
            color: #333;
            line-height: 1.25;
            text-align: center;
            text-decoration: none;
        }
        .flag .flag-item.figcation{
        }
    </style>
</head>
<body>
    <div class="item-section">
        <div class="item-section_header">
            <h2>
                <img src="https://vcg00.cfp.cn/creative/vcg/800/new/VCG211400758273.jpg" alt="">
            </h2>
            <ul>
                <li class="flag">
                    <a href="#" rel="external nofollow"  rel="external nofollow"  class="figure flag-item">
                        <img src="https://img01.yzcdn.cn/upload_files/2020/07/12/FpqXmM2BqlctoMg5D5XpGI9utw9r.png%21middle.jpg" alt="">
                    </a>
                    <div class="figcation flag-item">
                        <div class="flag-title">
                            <a href="#" rel="external nofollow"  rel="external nofollow" >
                                我是鞋子 我是鞋子我我我子我是鞋子
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

代碼解釋?zhuān)?/h3>
根元素字體大小設(shè)置：與前面的示例相同，通過(guò) JavaScript 動(dòng)態(tài)設(shè)置根元素的字體大小。
頁(yè)面布局：使用 rem 單位來(lái)設(shè)置元素的寬度、高度、內(nèi)邊距等屬性，確保頁(yè)面在不同設(shè)備上都能自適應(yīng)顯示。
商品列表：使用 display: table 和 display: table-cell 來(lái)實(shí)現(xiàn)商品列表的布局，每個(gè)商品項(xiàng)包含圖片和標(biāo)題。

總結(jié)

使用 rem 單位是實(shí)現(xiàn)移動(dòng)端響應(yīng)式頁(yè)面的一種簡(jiǎn)單而有效的方法。通過(guò)動(dòng)態(tài)設(shè)置根元素的字體大小，我們可以根據(jù)設(shè)備的屏幕寬度自適應(yīng)調(diào)整頁(yè)面的布局。在實(shí)際開(kāi)發(fā)中，我們只需要將設(shè)計(jì)稿上的像素尺寸換算成 rem 單位，就可以輕松實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。希望本文能幫助你更好地理解和應(yīng)用 rem 單位來(lái)創(chuàng)建移動(dòng)端響應(yīng)式頁(yè)面。

以上就是JavaScript使用rem實(shí)現(xiàn)移動(dòng)頁(yè)面響應(yīng)式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript rem移動(dòng)頁(yè)面響應(yīng)式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: