原創-移動WEB開發之rem適配佈局

阿新 • • 發佈：2021-01-18

技術標籤：前端 rem

移動WEB開發之rem適配佈局

1.1 rem 基礎

rem (root em)是一個相對單位，類似於em，em是父元素字型大小。

不同的是rem的基準是相對於html元素的字型大

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-size: 12px;
        }
        
        div {
            font-size: 12px;
            width: 15rem;
            height: 15rem; 

            background-color: purple;
        }
        
        p {
            /* 1. em相對於父元素 的字型大小來說的 */
            /* width: 10em;
            height: 10em; */
            /* 2. rem 相對於 html元素 字型大小來說的 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
            /* 3.rem的優點就是可以通過修改html裡面的文字大小來改變頁面中元素的大小可以整體控制 */ 

        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>

</body>

</html>

1.2 媒體查詢

媒體查詢（Media Query）是CSS3新語法。
使用 @media查詢，可以針對不同的媒體型別定義不同的樣式
@media 可以針對不同的螢幕尺寸設定不同的樣式
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面 
目前針對很多蘋果手機、Android手機，平板等裝置都用得到多媒體查詢

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 這句話的意思就是： 在我們螢幕上 並且 最大的寬度是 800畫素 設定我們想要的樣式 */
        /* max-width 小於等於800 */
        /* 媒體查詢可以根據不同的螢幕尺寸在改變不同的樣式 */
        
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>
</head>

<body>

</body>

</html>

1.3 mediatype 查詢型別

在這裡插入圖片描述

1.4 關鍵字

關鍵字將媒體型別或多個媒體特性連線到一起做為媒體查詢的條件。

and：可以將多個媒體特性連線到一起，相當於“且”的意思。
not：排除某個媒體型別，相當於“非”的意思，可以省略。
only：指定某個特定的媒體型別，可以省略.

1.5 媒體特性

在這裡插入圖片描述

1.6 媒體查詢案例修改背景顏色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 1. 媒體查詢一般按照從大到小或者 從小到大的順序來 */
        /* 2. 小於540px 頁面的背景顏色變為藍色 */
        
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我們的頁面顏色改為 綠色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大於等於970 我們頁面的顏色改為 紅色 */
        
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 還有 and 必須帶上不能省略的 */
        /* 6. 我們的數字後面必須跟單位  970px   這個 px 不能省略的 */
    </style>
</head>

<body>

</body>

</html>

1.7 媒體查詢+rem實現元素動態變化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 從小到大的順序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">購物車</div>
</body>

</html>

1.8 引入資源

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 當我們螢幕大於等於 640px以上的，我們讓div 一行顯示2個 */
        /* 當我們螢幕小於640 我們讓div一行顯示一個 */
        /* 一個建議： 我們媒體查詢最好的方法是從小到大 */
        /* 引入資源就是 針對於不同的螢幕尺寸 呼叫不同的css檔案 */
    </style>
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>

<body>
    <div>1</div>
    <div>2</div>
</body>

</html>

1.9 less 基礎

Less中文網址：http://lesscss.cn/
需要安裝node.js再安裝less
npm install -g less

1.9.1 變數

必須有@為字首
不能包含特殊字元
不能以數字開頭
大小寫敏感

// 定義一個粉色的變數
@color: pink;  
// 錯誤的變數名  @1color   @[email protected]#
// 變數名區分大小寫  @color  和  @Color 是兩個不同的變數
// 定義了一個 字型為14畫素的變數
@font14: 14px;
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}
a {
    font-size: @font14;
}

1.9.2 Less 巢狀

.header {
   width: 200px;
   height: 200px;
   background-color: pink;
   // 1. less巢狀 子元素的樣式直接寫到父元素裡面就好了
   a {
       color: red;
       // 2. 如果有偽類、交集選擇器、 偽元素選擇器 我們內層選擇器的前面需要加&
       &:hover {
           color: blue;
       }
   }
}
.nav {
   .logo {
       color: green;
   }
   &::before {
       content: "";
   }
}

1.9.3 Less 運算

任何數字、顏色或者變數都可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}
// 1. 我們運算子的左右兩側必須敲一個空格隔開
// 2. 兩個數參與運算  如果只有一個數有單位，則最後的結果就以這個單位為準
// 3. 兩個數參與運算，如果2個數都有單位，而且不一樣的單位 最後的結果以第一個單位為準

1.10 rem適配方案

1.讓一些不能等比自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置。

2.使用媒體查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。

1.10.1 rem 適配方案1

1.less+rem+媒體查詢

2.flexible.js+rem
github地址：[https://github.com/amfe/lib-flexible]

1.10.2 rem實際開發適配方案

1 假設設計稿是750px

2 假設我們把整個螢幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）

3 每一份作為html字型大小，這裡就是50px

4 那麼在320px裝置的時候，字型大小為320/15就是  21.33px

5 用我們頁面元素的大小除以不同的 html字型大小會發現他們比例還是相同的

6 比如我們以750為標準設計稿

7 一個100*100畫素的頁面元素在  750螢幕下，  就是 100/ 50  轉換為rem  是  2rem*2rem  比例是1比1

8 320螢幕下，  html字型大小為21.33   則 2rem=  42.66px  此時寬和高都是 42.66  但是寬和高的比例還是 1比1

9 但是已經能實現不同螢幕下  頁面元素盒子等比例縮放的效果

1.10.3 總結

1 最後的公式：頁面元素的rem值 =  頁面元素值（px） /  （螢幕寬度  /  劃分的份數）

2 螢幕寬度/劃分的份數就是 html:font-size 的大小

3 或者：頁面元素的rem值 =  頁面元素值（px） /  html: font-size 字型大小

1.10.4 rem 適配方案2

手機淘寶團隊出的簡潔高效 移動端適配庫

我們再也不需要在寫不同螢幕的媒體查詢，因為裡面js做了處理

它的原理是把當前裝置劃分為10等份，但是不同裝置下，比例還是一致的。

我們要做的，就是確定好我們當前裝置的html 文字大小就可以了
比如當前設計稿是 750px， 那麼我們只需要把 html 文字大小設定為 75px(750px / 10) 就可以
裡面頁面元素rem值： 頁面元素的px 值 /  75  
剩餘的，讓flexible.js來去算