rem適配布局

rem（root em）是乙個相對單位，類似em，em是相對于父元素的字型大小

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

rem的優勢:父元素文字大小可能不一致， 但是整個頁面只有乙個html，可以很好來控制整個頁面的元 素大小 

**查詢（media query）是css3新語法

@media mediatype and|not|only (media feature)

/*

在螢幕上 並且 最大寬度是800畫素 設定我們想要的樣式 
rem單位是跟著html來走的，有了rem頁面元素可以設定不同大小尺寸
**查詢可以根據不同裝置寬度來修改樣式
**查詢+rem 就可以實現不同裝置寬度，實現頁面元素大小的動態變化
當樣式比較繁多的時候，我們可以針對不同的**使用不同 stylesheets(樣式表)。 原理，就是直接在link中判斷裝置的尺寸，然後引用不同的css檔案
針對不同的螢幕尺寸呼叫不同的css檔案
css 是一門非程式式語言，沒有變數、函式、scope(作用域)等概念。
less (leaner style sheets 的縮寫) 是一門 css 擴充套件語言，也稱為css預處理器。
做為 css 的一種形式的擴充套件，它並沒有減少 css 的功能，而是在現有的 css 語法上，為css加入程式式語言的
特性。它在 css 的語法基礎之上，引入了變數，mixin(混入)，運算以及函式等功能，大大簡化了 css 的編寫，並且
降低了 css 的維護成本，就像它的名稱所說的那樣，less 可以讓我們用更少的**做更多的事情。
less中文**: 
常見的css預處理器:sass、less、stylus
一句話:less 是一門 css 預處理語言，它擴充套件了css的動態特性。 
變數是指沒有固定的值，可以改變的。因為我們css中的一些顏色和數值等經常使用 
@變數名:值;

@color: pink

body div 
變數名區分大小寫 @color 和 @color 是兩個不同的變數

本質上，less 包含一套自定義的語法及乙個解析器，使用者根據這些語法定義自己的樣式規則，這些規則 最終會通過解析器，編譯生成對應的 css 檔案。
所以，我們需要把我們的 less檔案，編譯生成為css檔案，這樣我們的html頁面才能使用。 
vscode less外掛程式
只要儲存一下less檔案，會自動生成
css檔案。 
#header }
如果遇見 (交集|偽類|偽元素選擇器)

任何數字、顏色或者變數都可以參與運算。就是less提供了加(+)、減(-)、乘(*)、除(/)算術運算。 
注意:rem 適配方案
1. 我們適配的目標是什麼？
讓一些不能等比自適應的元素，達到當裝置尺寸發生改變 的時候，等比例適配當前裝置。 
2. 怎麼去達到這個目標的?
使用**查詢根據不同裝置按比例設定html的字型大小， 然後頁面元素使用rem做尺寸單位，當html字型大小變化 元素尺寸也會發生變化，從而達到等比縮放的適配 
3. 在實際的開發當中使用?
在 index.less 中匯入 common.less 檔案 @import 「common」把乙個樣式檔案引入另外乙個樣式檔案
而link是把乙個樣式檔案引入到html頁面裡面 
 
rem適配布局
rem適配布局 rem基礎 rem是乙個單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小 不同的是rem的基準是相對於html元素的字型大小 比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px rem的...
rem適配布局
思考？頁面布局文字能否隨著螢幕大小變化而變化？流式布局和flex布局主要針對與寬度布局，那高度如何設定？怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放？這時就需要用到rem適配布局。rem root em 是乙個相對單位，類似於em,em是相對于父元素的字型大小。而rem的基準是相對於html元...
詳解rem 適配布局
當今手機種類繁多 且不說iphone系列，安卓手機的種類已經數不勝數了，所以不可能每一款手機都要寫一套布局樣式，這也是不可能做到的，但是對於越來越精益求精的前端來說 當然要找到乙個合理的解決方案。rem 就是用來自適應布局的。適配要達到的效果，如下圖 簡單的示範一下 兩個div不論在大屏還是小屏上都...