rem適配布局

一、rem基礎

rem（root em）是一個相對單位，類似em，em是相對於父元素的字體大小

不同的是rem的基准是相對於HTML元素的字體大小

 

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

 

二、媒體查詢

2.1 什么是媒體查詢

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

• 使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式
• @media 可以針對不同的屏幕尺寸設置不同的樣式
• 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
• 目前針對很多蘋果手機、Android手機，平板等設備都用得到多媒體查詢 

@media mediatype and|not|only (media feature) { 
    CSS-Code;
}

• 用 @media 開頭 注意@符號
• mediatype 媒體類型
• 關鍵字 and not only
• media feature 媒體特性 必須有小括號包含 

/* 在屏幕上 並且 最大寬度是800像素 設置我們想要的樣式 */
        
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }

2.2 語法規范

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

rem單位是跟着html來走的，有了rem頁面元素可以設置不同大小尺寸

媒體查詢可以根據不同設備寬度來修改樣式
媒體查詢+rem 就可以實現不同設備寬度，實現頁面元素大小的動態變化

2.4 引入資源

 

當樣式比較繁多的時候，我們可以針對不同的媒體使用不同 stylesheets(樣式表)。 原理，就是直接在link中判斷設備的尺寸，然后引用不同的css文件

 針對不同的屏幕尺寸調用不同的css文件

三、less基礎

3.1 維護css的弊端

CSS 是一門非程序式語言，沒有變量、函數、SCOPE(作用域)等概念。

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

3.2 less介紹

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

Less中文網址: http://lesscss.cn/ 常見的CSS預處理器:Sass、Less、Stylus
一句話:Less 是一門 CSS 預處理語言，它擴展了CSS的動態特性。 

 

3.3 less變量

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

@變量名:值;

@color: pink

body {
    background-color: @color;
}

div {
    color: @color;
}

 

變量名區分大小寫 @color 和 @Color 是兩個不同的變量

 

3.4 less編譯

本質上，Less 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則 最終會通過解析器，編譯生成對應的 CSS 文件。

所以，我們需要把我們的 less文件，編譯生成為css文件，這樣我們的html頁面才能使用。 

vscode less插件

Easy LESS 插件用來把less文件編譯為 css文件
安裝完畢插件，重新加載下 vscode。 只要保存一下Less文件，會自動生成 CSS文件。 

3.5 less嵌套

#header {
        .logo {
            width: 300px; 
        }
}

如果遇見 (交集|偽類|偽元素選擇器)

• 內層選擇器的前面沒有 & 符號，則它被解析為父選擇器的后代;
• 如果有 & 符號，它就被解析為父元素自身或父元素的偽類。 

 

3.6 less運算

任何數字、顏色或者變量都可以參與運算。就是Less提供了加(+)、減(-)、乘(*)、除(/)算術運算。 

注意:

• 乘號(*)和除號(/)的寫法
• 運算符中間左右有個空格隔開 1px + 5
• 對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
• 如果兩個值之間只有一個值有單位，則運算結果就取該單位 

四、rem適配方案

rem 適配方案

1. 我們適配的目標是什么？

讓一些不能等比自適應的元素，達到當設備尺寸發生改變 的時候，等比例適配當前設備。 

2. 怎么去達到這個目標的?

使用媒體查詢根據不同設備按比例設置html的字體大小， 然后頁面元素使用rem做尺寸單位，當html字體大小變化 元素尺寸也會發生變化，從而達到等比縮放的適配 

3. 在實際的開發當中使用? 

 

 

 在 index.less 中導入 common.less 文件 @import “common”把一個樣式文件引入另外一個樣式文件

而link是把一個樣式文件引入到HTML頁面里面