我的前端自學之路2020/12/31 rem適配佈局

rem單位：
rem（root rem）是一個相對單位，類似於em，em是父元素字型大小，不同的是rem是基於html元素的字型大小。比如根元素（html）設定字型大小font-size=12px，非根元素設定width： 2rem；則表示非根元素寬度為24px。rem的優點就是可以通過修改頁面根元素的文字大小來整體控制頁面元素的大小。

媒體查詢：
媒體查詢（media query）
使用@media查詢，可以針對不同的媒體型別，定義不同的樣式。針對不同的螢幕尺寸，設定不同的樣式，在瀏覽器重置大小的過程中，頁面會根據瀏覽器的寬度和高度重新渲染頁面，簡而言之，使用@media來自動識別裝置螢幕的大小，從而相應的改變頁面根元素的字型大小，達到整體控制頁面元素的目的。
語法：
@media mediatype媒體型別 and|not|only關鍵字 （media feature媒體特性） { CSS Code}

媒體型別mediatype：
all 所有裝置
print 列印預覽
screen PC、平板、手機

媒體特性media feature：
width 定義輸出裝置中頁面可見區域的寬度
max-width 定義輸出裝置中最大可見區域寬度
min-width 定義輸出裝置中最小可見區域寬度

媒體查詢的一個小示例:

/*螢幕寬度在600px以內，body的背景顏色為紅色*/
@media screen and (max-width: 600px) {
	body {
		background-color: red;
	}
}
/*螢幕寬度在601px和800px之間，body的背景顏色為藍色*/
@media screen and (min-width: 601px) {
	body {
		background-color: blue;
	}
}
/*螢幕寬度在801px和1000px之間，body的背景顏色為黃色*/
@media screen and (min-width: 801px) {
	body {
		background-color: yellow;
	}
}
/*螢幕寬度在1001px以上，body的背景顏色為粉色*/
@media screen and (min-width: 1001px) {
	body {
		background-color: pink;
	}
}

rem搭配媒體查詢實現元素的動態大小變化的簡單示例

<section>
        REM搭配媒體查詢實現自適應
</section>

* {
 	padding: 0;
    margin: 0;
 }
@media screen and (max-width: 1000px) {
 	html {
    	font-size: 20px;
    }
}
@media screen and (min-width: 1001px) {
    html {
        font-size: 100px;
    }
}   
section {
    width: 100%;
    height: 2rem;
    font-size: .5rem;
    background-color: pink;
    text-align: center;
    line-height: 2rem;
}

媒體查詢引入資源
當樣式比較繁多的時候，我們可以針對不同的媒體使用不同的CSS樣式表，原理就是直接在link中判斷裝置的尺寸，然後引入不同的CSS檔案，以達到頁面整體佈局有較大改變。

關於引入資源的小示例：

<!-- 當螢幕寬度在320px以內時，使用firststyle.css -->
<link rel="stylesheet" href="./css/firststyle.css" media="screen and (max-width: 320px)">
<!-- 當螢幕寬度在321px和640px之間時，使用secondstyle.css -->
<link rel="stylesheet" href="./css/secondstyle.css" media="screen and (min-width: 321px) and (max-width: 640px)">

Less基礎

使用less的原因：css是一門非程式式語言，沒有變數、函式、作用域等概念，css需要書寫大量看似沒有邏輯的程式碼，程式碼冗餘度非常高，不方便維護擴充和複用，最重要的，CSS時沒有計算能力的。

less，是一門css擴充套件語言，也成為css前處理器。它沒有減少css的功能，而是在現有的css語法上，為css加入了程式式語言的特性。

常見的css前處理器除了less，還有sass、stylus

Less變數
語法：@變數名： 值；
規範：
1 .必須有@為字首
2 .不能包含特殊字元
3 .不能以數字開頭
4 .大小寫敏感

//定義
@color: red;
@font20: 20px;
//使用
div {
	background-color: @color;
}
span {
	color: @color;
	font-size: @font20;
}

Less編譯
本質上，less包含一套自己的語法和解析器，使用者根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的CSS檔案，所以，我們需要把less檔案編譯生成CSS檔案，html頁面才能使用。
vs-code上的less編譯外掛：Easy LESS （有好幾個，用法不太一樣）

Less巢狀
1 .子元素的樣式直接寫在父元素裡面
2 .如果有偽類、偽元素、交集選擇器，內層選擇器前面要加&，不加則預設為後代選擇器
Less寫法：

@color: red;
@font20: 20px;
@width: 2.5rem;
@height: 1.5rem;
header {
    width: 200px;
    height: 200px;
    background-color: @color;
    a {
      color: @color;
    }
}
ul {
    li {
        width: @width;
        height: @height;
        .logo {
            &:hover {
                color: @color;
            }
            &::after {
                content: "";
            }
        }
        &.list {
            width: @width;
        }
    }
}

編譯後的css

header {
  width: 200px;
  height: 200px;
  background-color: red;
}
header a {
  color: red;
}
ul li {
  width: 2.5rem;
  height: 1.5rem;
}
ul li .logo:hover {
  color: red;
}
ul li .logo::after {
  content: "";
}
ul li.list {
  width: 2.5rem;
}

Less運算
Less提供了基本的加減乘除運算，任何數字、顏色(16進位制)、或者變數都可以參與運算

@baseFont：50px;
html {
    font-size: @baseFont;
}

@border: 1px + 1;

section {
    width: 82rem / @bsaeFont;
    height: 82 / 50rem;
    border: @border solid #ccc;
}

注意單位問題：兩個數值參與運算時，結果以第一個值的單位為準，如果第一個沒有單位，則以後一個值的單位為準。

rem適配方案1
rem+媒體查詢+less
常見設計稿（選擇的標準尺寸）尺寸寬度：
ios：750px
android：大部分4.7-5寸的安卓裝置為720px，其他極端屏可以選擇放棄或者對其優雅降級

動態設定html的font-size大小：
1 .假設設計稿是750px，假設把螢幕劃分為15等份（也可以劃分為10等份或者20等份）
2 .每一份作為html字型大小，這裡就是50px
3 .那麼在320px螢幕的時候，字型大小為320 / 15就是21.33PX
4 .用我們頁面元素的大小，除以不同的html字型大小會發現它們比例還是相同的
5 .如果以750為標準設計稿，一個100*100畫素的頁面元素在750螢幕下，就是100 / 50，轉換為rem就是2rem，元素的寬高為1 ： 1，而同一元素在320螢幕下，html字型大小為21.33，，則2rem=42.66px，寬和高的比例還是1 ： 1，就實現了不同螢幕下頁面元素等比例縮放的效果。

元素大小的取值方法：
html字型大小 = 螢幕尺寸 / 劃分的份數
頁面元素大小（rem）= 頁面元素大小（px） / html字型大小

rem適配方案2
flexible.js + rem

flexible.js是手機淘寶團隊出的簡潔高效移動端適配庫，它包含了不同螢幕的媒體查詢，用js做了高效的處理，它的原理是將當前螢幕劃分為10等份，我們要做的，就是確定好當前螢幕的html文字大小，比如當前設計稿是750px，那麼我們只需要把html文字大小設定為75px，頁面元素rem = 頁面元素的px值 / 75，其他的交給flexible.js去計算。