快捷導(dǎo)航

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

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

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

什么是 rem 單位

rem（root em）是一個相對單位，它相對于根元素（即元素）的字體大小。例如，如果元素的字體大小設(shè)置為 16px，那么 1rem 就等于 16px；如果元素的字體大小變?yōu)?20px，那么 1rem 就等于 20px。這種相對性使得 rem 單位在實現(xiàn)響應(yīng)式設(shè)計時非常有用，因為我們可以通過動態(tài)改變根元素的字體大小來調(diào)整整個頁面的布局。

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 rem 實現(xiàn)響應(yīng)式頁面</title>
    <script>
        // 立即執(zhí)行函數(shù)
        (function(){
            function calc(){
                // 獲取設(shè)備屏幕的寬度
                const w = document.documentElement.clientWidth;
                console.log(w);
                // 750 是設(shè)計稿的寬度
                document.documentElement.style.fontSize = 75 * (w / 750) + 'px';
            }
            // 首次加載時計算并設(shè)置根元素字體大小
            calc();
            // 當窗口大小改變時重新計算并設(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>

代碼解釋：

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

實際應(yīng)用示例

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>響應(yīng)式商品列表頁面</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>

代碼解釋：

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

總結(jié)

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

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

您可能感興趣的文章: