保安日記：前端學習第十三篇之移動端佈局rem佈局

卓曉暉發表於2020-10-10
前端REM

移動端佈局

rem適配佈局

流式佈局和flex佈局都不能控制頁面字型隨著頁面變化而變化

rem基礎

em單位
em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

特點：

  1. em的值並不是固定的；
  2. em會繼承父級元素的字型大小

rem單位
rem (root em)是一個相對單位，類似於em , em是父元素字型大小。
不同的是rem的基準是相對於html元素的字型大小。
rem的優點就是可以通過修改HTML裡面的文字大小來改變頁面中元素的大小，可以整體控制

  html {
        font-size: 12px;
      }
  p    {
        width: 10rem;
        height: 10rem;
      }
    /*此處盒子p大小為 120*120*/

注意：
選擇使用什麼字型單位主要由你的專案來決定，如果你的使用者群都使用最新版的瀏覽器，那推薦使用rem
如果要考慮相容性，那就使用px,或者兩者同時使用。

媒體查詢（Media Query）

媒體查詢是CSS3新語法

  • 使用@media查詢，可以針對不同的媒體型別定義不同的樣式
  • @media可以針對不同的螢幕尺寸設定不同的樣式
  • 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
 @media mediatype and |not|only (media feature) {
                CSS-Code;
            }

注意：
1.用@media開頭注意@符號
2.mediatype 媒體型別
3.關鍵字and not only
4.media feature媒體特性必須有小括號包含

1.mediatype 查詢型別
將不同的終端裝置劃分成不同的型別，稱為媒體型別
在這裡插入圖片描述
2.關鍵字
關鍵字將媒體型別或多個媒體特性連線到一起做為媒體查詢的條件

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

3.媒體特性（media feature）
每種媒體型別都具體各自不同的特性，根據不同媒體型別的媒體特性設定不同的展示風格。注意他們要加小括號包含
在這裡插入圖片描述

@media screen and (max-width:880px){
body{
background-color:pink;
}
}

這句話的意思就是：在我們螢幕上 並且 最大的寬度是880px 背景色為粉色 超過就不變色了
注意：
媒體查詢要按照從小到大或者從大到小的順序來寫，最好從小到大來寫
這樣程式碼比較簡潔   多個條件後面要加and分開寫

媒體查詢從小大到大：在這裡插入圖片描述
4.媒體查詢+rem實現元素動態大小變化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @media screen and(min-width:540px) {
        html {
          font-size: 50px;
        }
      }
      @media screen and(min-width:640px) {
        html {
          font-size: 100px;
        }
      }
      .top {
        height: 5rem;
        font-size: 0.5rem;
        background-color: pink;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="top">hello</div>
  </body>
</html>

5.引入資源
當樣式比較繁多的時候，我們可以針對不同的媒體使用不同stylesheets(樣式表)。
原理，就是直接在link中判斷裝置的尺寸，然後引用不同的css檔案。
語法：

<link rel="stylesheet" media="mediatype and|notlonly (media feature)" href="mystylesheet.css">

案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 當我們螢幕大於等於640px以上的，我們讓div 一行顯示2個 */
      /* 當我們螢幕小於640 我們讓div一行顯示一個 */
    </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>

Less基礎

維護CSS的弊端
CSS是一門非程式式語言，沒有變數、函式、SCOPE（作用域）等概念。

  • CSS需要書寫大量看似沒有邏輯的程式碼，CSS冗餘度是比較高的。
  • 不方便維護及擴充套件，不利於複用。
  • CSS沒有很好的計算能力
  • 非前端開發工程師來講，往往會因為缺少CSS編寫經驗而很難寫出組織良好且易於維護的CSS程式碼專案。

Less介紹
Less ( Leaner Style Sheets的縮寫）是一門CSS擴充套件語言，也成為CSS前處理器。
做為CSS的一種形式的擴充套件，它並沒有減少CSS的功能，而是在現有的CSS語法上，為CSS加入程式式語言的特性。
它在CSS的語法基礎之上，引入了變數，Mixin(混入），運算以及函式等功能，大大簡化了CSS的編寫，並且降低了CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的程式碼做更多的事情。

Less的使用
首先新建一個字尾名為less的檔案，在這個檔案裡面書寫less語句

  • Less 變數
    CSS中的顏色和數值經常使用
@變數名：值;
@color:pink;
body{
	background-color:@color;
}

變數命名規範：
1.必須有@為字首
2.不能包含特殊字元
3.不能以數字開頭
4.區分大小寫
  • Less編譯
    本質上，Less包含一套自定義的語法及一個解析器，使用者根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的CSS檔案。
    所以，我們需要把我們的less檔案，編譯生成為css檔案，這樣我們的html頁面才能使用。
    VsCode外掛 EasyLess
    Easy LESS外掛用來把less檔案編譯為css檔案安裝完畢外掛，重新載入下vscode。只要儲存一下Less檔案，會自動生成CSS檔案。
  • Less巢狀
.header {
  width: 200px;
  height: 200px;
  background-color: pink;
  //   1.less巢狀 子元素樣式直接寫到父元素裡面就可以了
  a {
    color: #000;

    // 2.如果有偽類、交集選擇器、偽元素選擇器 我們內層選擇器前面需要加上&
    &:hover {
      color: red;
    }
  }
}
.nav {
  .logo {
    color: salmon;
  }
  &::before {
    content: "";
  }
}
  • Less 運算
    任何數字、顏色或者變數都可以參與運算。就是less提供了加+ 減 -乘 * 除/算數運算
    在這裡插入圖片描述
    注意∶
    1.乘號( * )和除號( / ）的寫法
    2.運算子中間左右有個空格隔開1px + 5
    3.對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
    4.如果兩個值之間只有一個值有單位，則運算結果就取該單位

rem 實際開發適配方案

1.按照設計稿與裝置寬度的比例，動態計算並設定html根標籤的font-size大小;(媒體查詢)
2.CSS中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為rem為單位的值;

rem 適配方案技術使用

  • 方案一
    1.less
    2.媒體查詢
    3.rem
  • 方案二（推薦）
    1.flexible.js
    2.rem

總結：兩種方案都存在，方案二更簡單，現階段大家無需瞭解裡面的js程式碼

rem 實際開發適配方案1
rem + 媒體查詢 + less技術
1.設計稿常見尺寸寬度
在這裡插入圖片描述
一般情況下，我們以一套或兩套效果圖適應大部分的螢幕，放棄極端屏或對其優雅降級，犧牲一些效果現在基本以750為準

2.動態設定html標籤font-size大小
①假設設計稿是750px
②假設我們把整個螢幕劃分為15等份(劃分標準不一可以是20份也可以是10等份)
③每一份作為html字型大小，這裡就是50px
④那麼在320px裝置的時候，字型大小為320/15就是21.33px
⑤用我們頁面元素的大小除以不同的html字型大小會發現他們比例還是相同的
⑥比如我們以750為標準設計稿
⑦一個100*100畫素的頁面元素在750螢幕下，就是100/50轉換為rem是2rem *2 rem比例是1比1
⑧320螢幕下，html字型大小為21.33則2rem = 42.66px此時寬和高都是42.66但是寬和高的比例還是1比1
⑨但是已經能實現不同螢幕下頁面元素盒子等比例縮放的效果

3.元素大小取值方法
①最後的公式∶頁面元素的rem值=頁面元素值( px)/（螢幕寬度│劃分的份數)
②螢幕寬度/劃分的份數就是html font-size的大小
③或者:頁面元素的rem值=頁面元素值( px ) / html font-size字型大小

相關文章