移動 WEB 開發佈局方式 ---- rem 適配佈局

阿新 • • 發佈：2020-12-13

一、rem 基礎

1. rem 單位

em :
相對於父元素的字型大小來說的

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

div {
        font-size: 12px;
    }
    p {
        width: 10em;
        height: 10em;
        background-color: pink;
    }

rem:
相對於 html 元素字型大小來說的

    html {
        font-size: 16px;
    }
    div {
        font-size: 12px;
    }
    p {
        /*width: 10em;*/
        /*height: 10em;*/
        width: 10rem;
        height: 10rem;
        background-color: pink;
    }

總結：rem的優點就是可以通過修改html裡面的文字大小來改變頁面中元素的大小，頁面中元素大小可以控制

二、媒體查詢

2.1 什麼是媒體查詢

2.2 語法規範

1. `mediatype` 媒體型別

2. 關鍵字

3. 媒體特性

栗子：

<style>
    /*這句話的意思就是：在我們螢幕上，並且 最大的寬度是 800畫素 設定我們想要的樣式*/
    /*max-width 小於等於800*/
    /*媒體查詢可以根據不同的螢幕尺寸在改變不同的樣式*/
    @media screen and (max-width: 900px){
      body{
          background-color: pink;
       }
    }
    @media  screen  and (max-width: 600px) {
        body{
            background-color: purple;
        }
    }
</style>

栗子2：根據頁面寬度改變頁面背景顏色

<style>
    /*1. 小於 540 px 頁面的背景變為藍色*/
    @media screen and (max-width: 539px){
        body{
            background-color: blue;
        }
    }
    /*2. 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;
        }
    }
    /*3.大於等於 970 頁面背景變成紅色  */
     @media screen and (min-width:970px){
        body{
            background-color: red;
        }
    }
</style>

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

栗子：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    @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: 0.5rem;
        background-color: deeppink;
        color: #ffffff;
        text-align: center;
        line-height: 1rem;
    }
</style>
<body>
<div class="top">購物車</div>
</body>

2.4 引入資源

1 .語法規範

栗子：

需求：當我們螢幕大於等於 640px 以上的，我們讓 div 一行顯示 2 個
當我們螢幕小於 640 我們讓div一行顯示一個
建議媒體查詢最好的方法是從小到大

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

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

style320.css

div {
    width: 100%;
    height: 100px;
}
div:nth-child(1){
    background-color: pink;
}
div:nth-child(2){
    background-color: purple;
}

style640.css

div {
    width: 50%;
    height: 100px;
    float: left;
}
div:nth-child(1){
    background-color: pink;
}
div:nth-child(2){
    background-color: purple;
}

總結：引入資源就是針對不同的螢幕尺寸呼叫不同的 CSS 檔案

三、Less 基礎

3.1 Less作用（維護 css 的弊端）

3.2 Less介紹

3.3 Less 使用

3.4 Less 變數

栗子：

//定義一個顏色為粉色的變數
@color:pink;
//定義一個 字型為141畫素的變數
@font14:14px;
body {
  background-color: @color;
}
div {
  background-color: @color;
  font-size: @font14;
}
a{
  font-size: @font14;
}

注意：
錯誤的變數名 @1color @color~#
變數名區分大小寫 @color 和 @Color 是兩個不同的變數

3.5 Less 編譯

vocode Less外掛

Easy LESS 外掛用來把 less 檔案編譯成 css 檔案

安裝完畢外掛，重新下載下 vscode

只要儲存一下 Less 檔案，會自動生成CSS 檔案

當修改 my.less 儲存的時候，my.css 會自動的去修改

栗子：
my.less

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

21.less的使用.html

<link rel="stylesheet" href="my.css">

<body>
<div>誰還不是一個小仙女呢！</div>
</body>

3.6 Less 巢狀

選擇器的巢狀

栗子：

less檔案

.header {
    width: 200px;
    height: 200px;
    background-color:pink;
   // less巢狀 子元素的樣式直接寫到父元素裡面即可
    a {
        color: red;
    }
}

被編譯成css檔案如下

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}

交集、偽類、偽元素選擇器的巢狀

偽類栗子：
less檔案

.header {
    width: 200px;
    height: 200px;
    background-color:pink;
    a {
        color: red;
        &:hover {
            color: blue
        }
    } 
}

被編譯成css檔案如下

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}
.header a:hover {
  color: blue;
}

偽元素栗子：
less 檔案

.nav {
   .logo{
       color: red;
   }
   &::before{
    content: "";
   }    
}

被編譯成css 檔案如下

.nav .logo {
  color: red;
}
.nav::before {
  content: "";
}

3.7 Less 運算

栗子1：
less檔案

@border:5px + 5;
div {
   width: 200px - 50;
   height: 200px * 2;
   border:@border solid red
}
img {
   width:82 / 50rem;
   height: 82 / 50rem;
}

css 檔案

div {
  width: 150px;
  height: 400px;
  border: 10px solid red;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

栗子2：
less檔案

@baseFont:50px;
html{
    font-size: @baseFont;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}

css 檔案

html {
  font-size: 50px;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

總結：
1.運算子的左右兩側必須用空格隔開
2. 兩個數參與運算，如果只有一個數有單位，則最後的結果就以這個單位為準
3. 兩個數參與運算，如果兩個數都有單位，並且單位不一致，則最後的結果以第一個數的單位為準

注意：
顏色也可以參與運算，比如
less檔案
background-color:#666 - #222
css 檔案：
background-color:#444

四、 rem 適配方案

4.1 rem 實際開發適配方案

4.2 rem 適配方案技術使用（市場主流）

4.3 rem 實際開發適配方案一

rem + 媒體查詢 + less

1. 設計稿常見尺寸寬度

2. 動態設定html 標籤 font-size 大小

栗子：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    @media screen and (min-width:320px){
        html{
            font-size: 22px;
        }
    }
    @media screen and (min-width:750px){
        html{
            font-size: 50px;
        }
    }
    div {
        width: 2rem;
        height: 2rem;
        background-color:pink;
    }
</style>
</head>
<body>
<div></div>
</body>