module4-05-rem佈局-媒體查詢-less基礎

阿新 • • 發佈：2020-11-30

rem佈局 + 媒體查詢 + Less + flexible

一、rem佈局

1.1 思考

（1）頁面佈局文字能否隨著螢幕大小變化而變化？

可以，在rem之前，只能通過設定固定的字號大小來佈局，通過rem可以實現

（2）流式佈局和flex佈局主要針對與寬度故居，那高度如何設定？

通過設定固定值而進行佈局
所以設定rem佈局的話可以讓螢幕發生變化的時候元素高度和寬度等比例縮放

（3）技術選型

1.2 rem單位

rem是一個相對定位，類似於em，em是相對於父元素字型大小
rem是相對於<html>元素的字型大小
優勢：父元素的文字大小可能不一致，單頁面只有一個html，可以很好的控制整個頁面的元素大小比例

二、媒體查詢

媒體查詢（Media Query）是CSS3新語法

使用@media查詢，可以針對不同的媒體型別定義不同的樣式
@media可以針對不同的螢幕尺寸設定不同的樣式
當你充值瀏覽器大小的過程中，頁面也會根據瀏覽ide寬度和高度重新渲染頁面
目前針對很多蘋果手機，安卓手機，平板等裝置idou用得到多美的查詢

2.1 語法規範

用@media開頭，注意@符號
mediatype媒體型別
- 值解釋說明
  
  all 用於所有裝置
  
  print 用於印表機和列印預覽
  
  screen（常用）用於電腦螢幕，平板電腦，智慧手機
關鍵字
- and：”且“
- not：排除某個類體型別 ”非“
- or：可以測試多個媒體查詢的條件，“或”
- only：指定某個特定的媒體型別，可以省略

值	解釋說明
all	用於所有裝置
print	用於印表機和列印預覽
screen（常用）	用於電腦螢幕，平板電腦，智慧手機

media feature 媒體特徵必須有小括號包含

值	解釋說明
width	定義輸出裝置中頁面可見區域的寬度
min-width	定義輸出裝置中頁面最小可見區域寬度
max-width	定義輸出裝置中頁面最大可見區域寬度

建議從小寫到大

@media screen and (max-width: 319px) {...}
@media screen and (min-width: 320px) {...}
@media screen and (max-width: 540px) {...}
@media screen and (max-width: 970px) {...}

2.2 媒體查詢 + rem實現元素動態大小變化

rem單位是跟著<html>來走的，有了rem頁面元素可以設定不同大小尺寸
媒體查詢可以根據不同裝置寬度來修改樣式
媒體查詢 + rem就可以實現不同裝置寬度，實現頁面元素大小的動態改變

2.3 引入資源

可以在link標籤引入樣式的時候就設定media

<link rel="stylesheet" media="screen and (max-width: 319px;)">

2.4 flexible.js

已經處理過媒體查詢
原理是把裝置分為10等份，不同裝置下，比例還是一致的
只需要自行初始化html的字號就行了

@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
   }
}

可以通過VScode外掛cssrem進行rem計算
- 要設定外掛的基礎字號，然後重啟VScode

2.5 總結

後面可以使用cssrem + less的方法同時進行計算

三、less

3.1 維護css的弊端

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

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

3.2 less的安裝

npm install -g less
lessc -v

3.3 Less的使用

（1）Less變數

變數是指沒有固定的值，可以動態改變的。因為我們CSS中的一些顏色和數值等經常使用
@變數名：值；

（2）Less編譯

less自己有一套解析器來解析自己的語法，解析完成之後生成css檔案
可以使用nodejs：lessc style.less > style.css
VScode外掛: Easy Less

（3）Less巢狀

用&
比如偽類選擇器

.box {
   &:hover {...}
}

（4）Less運算**

任何數字、顏色或者變數都可以參與運算。Less提供了加減乘除
單位選擇：
- 選取第一個單位或者唯一的那個單位
- width: 200rem / 20px => width: 10rem
運算中也可以使用變數
運算子左右必須加空格(包括顏色)

（5）rem實際開發適配方案

動態設定html標籤font-size大小
元素大小取值方法
- ① 主頁面元素的rem值 = 頁面元素值（px => 也就是設計稿的真實大小）/（螢幕亮度 / 劃分的份數）
- ② 螢幕寬度 / 劃分的份數就是html font-size的大小
- ③或者: 頁面元素的rem值 = 頁面元素(px) / html font-size字型大小