目前最火的前端佈局方式：less+flex+媒體查詢

1. rem基礎

rem單位

rem (root em)是一個相對單位，類似於em，em是父元素字體大小，rem的基準是相對於html元素的字體大小。

比如，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是24px。

/* 根html 爲 12px */
html {
   font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */       
div {
    font-size: 2rem;
}

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

2. 媒體查詢

2.1 什麼是媒體查詢

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

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

2.2 媒體查詢語法規範

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

/* 語法格式 */
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

2.2.1 mediatype 查詢類型

將不同的終端設備劃分成不同的類型，稱爲媒體類型

值	說明
all	所有設備
print	打印機或者打印預覽
screen	電腦、平板、智能手機的屏幕

2.2.2 關鍵字

關鍵字將媒體類型或多個媒體特性連接到一起做爲媒體查詢的條件。

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

2.2.3 媒體特性

每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且瞭解三個。

注意他們要加小括號

值	說明
width	輸出設備中可見區域寬度
min-width	輸出設備中最小可見區域寬度
max-width	輸出設備中最大可見區域寬度

<!-- 例子 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* 默認的樣式 */
    div{
        background: orange;
        width: 400px;
        height: 400px;
    }
    
    /* 針對顯示屏幕，且其最大寬度是1000px的時候(也就是屏幕寬度小於1000px的時候) */
    @media screen and (max-width: 1000px) {
        /* 下面就是滿足條件的時候設置的樣式 */
        div{
            background: red;
            width: 300px;
            height: 300px;
        }
    }

    /* 針對顯示屏幕，也就是屏幕寬度大於501px並且小於800px的的時候 */
    @media screen and (min-width: 501px) and (max-width: 800px) {
        /* 下面就是滿足條件的時候設置的樣式 */
        div{
            background: green;
            width: 200px;
            height: 200px;
        }
    }

    /* 針對顯示屏幕，且其最大寬度是500px的時候(也就是屏幕寬度小於500px的時候) */
    @media screen and (max-width: 500px) {
        /* 下面就是滿足條件的時候設置的樣式 */
        div{
            background: blue;
            width: 100px;
            height: 100px;
        } 
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.2.4 媒體查詢書寫規則

注意：爲了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫，比如從小到大可以這樣規劃：

2.2.5 媒體查詢的另一種寫法之引入資源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 當屏幕寬度大於等於800px的時候引入big.css -->
    <link rel="stylesheet" href="./big.css" media="screen and (min-width: 800px)">
    <!-- 當屏幕寬度小於等於800px的時候引入small.css -->
    <link rel="stylesheet" href="./small.css" media="screen and (max-width: 800px)">
    <title>Document</title>
</head>
<body>
    <div>我愛祖國</div>
    <div>我是祖國的花朵</div>
</body>
</html>

/* big.css */
div{
    height: 400px;
    width: 50%;
    float: left;
}

div:nth-child(1){
    background: red;
}

div:nth-child(2){
    background: orange;
}

/* small.css */
div{
    height: 400px;
    width: 100%;
    float: left;
}

div:nth-child(1){
    background: red;
}

div:nth-child(2){
    background: orange;
}

2.3 媒體查詢 + rem

有了媒體查詢和rem，我們就可以更靈活的製作自動變化的頁面，包括文字大小等。

<!--字體和高度隨着屏幕寬度變化而變化-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    @media screen and (min-width: 801px) {
        html{
            font-size: 50px;
        }
    }

    @media screen and (min-width: 501px) and (max-width: 800px) {
        html{
            font-size: 30px;
        }
    }

    @media screen and (max-width: 500px) {
        html{
            font-size: 20px;
        }
    }

    div{
        font-size: 0.5rem;
        height: 1rem;
        width: 100%;
        background-color: blueviolet;
        color: snow;
        line-height: 1rem;
    }
    </style>
</head>
<body>
    <div>我好帥啊！</div>
</body>
</html>

3. Less 入門

3.1 css的缺點

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

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

3.2 Less 介紹

Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成爲CSS預處理器。

做爲 CSS的一種形式的擴展，它並沒有減少CSS的功能，而是在現有的CSS語法上，爲CSS加入一些編程語言的特性。比如它引入了變量，Mixin（混入），運算以及函數等功能，這就大大簡化了 CSS 的編寫，並且降低了 CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的代碼做更多的事情。Less中文網址：http://less css.cn/

當然除了Less，CSS常見的預處理器還有Sass、Stylus等。

3.3 Less安裝

①安裝node.js，網址：http://nodejs.cn/download/

②檢查是否安裝成功，使用cmd命令（win10是window+r 打開運行輸入cmd） —輸入“node –v”查看版本即可

③基於nodejs在線安裝Less，使用cmd命令“npm install -g less”即可

④檢查是否安裝成功，使用cmd命令“ lessc -v ”查看版本即可

3.4 Less的使用

3.4.1 編寫Less文件

新建一個文件，可以根據自己的需求隨意命名，不過文件後綴名要是.less，比如：test.less。

3.4.2 變量

變量是指其值可以隨意變化的量，也就是說值不固定。

// 變量的聲明規則
@變量名:值;

必須有@爲前綴
不能包含特殊字符
不能以數字開頭
大小寫敏感

// 定義顏色變量
@color1: grey;
@color2: red;
@font14: 14px;
@font20: 20px;

.c1{
    // 使用顏色變量
    color: @color1;
    background: @color2;
    font-size: @font14;
}

.c2{
    color: @color2;
    background: @color1;
    font-size: @font20;
}

3.4.3 Less 編譯

我們寫好的less文件，並不能直接被我們的html頁面直接使用，需要編譯生成css文件後才能使用，編譯less文件的方法有很多，目前我們可以使用vscode的easy less插件進行編譯。

爲vscode 安裝`easy less`插件

easy less插件安裝完畢後（有的版本的vscode需要重新重新啓動），只要保存一下我們編寫的Less文件，會在同一級目錄中自動生成一個同名的CSS文件。

3.4.5 Less 嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./test.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="content">
            <a href="">中國</a>
            <a href="">河南</a>
            <a href="">鄭州</a>
            <a href="" class="address">打玉米/a>
        </div>
    </header>
</body>
</html>

// test.less
header{
    height: 50px;
    background: red;
    // 下級可以直接嵌套編寫
    .content{
        height: 30px;
        background: green;
        // 下級可以直接嵌套編寫
        a{
            color: orange;
            font-size: 14px;
            // 僞類需要在前面加個&符號
            &:hover{
                color: chartreuse;
            }
            // 僞元素也是要在前面加個&符號
            &::after{
                content: '我好帥';
            }
            // 交集也是要在前面加個&符號
            &.address{
                text-decoration: none;
            }
        }
    }
}

/* 編譯生成的 test.css */
header {
  height: 50px;
  background: red;
}
header .content {
  height: 30px;
  background: green;
}
header .content a {
  color: orange;
  font-size: 14px;
}
header .content a:hover {
  color: chartreuse;
}
header .content a::after {
  content: '書生';
}
header .content a.address {
  text-decoration: none;
}

3.4.6 Less 運算

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

// test.less
/* 這種註釋編譯生成的文件中也存在 */
// 這種註釋在編譯生成的文件中不存在

@border: 10px + 5;
div {
    height: 300px * 1.5;
    width: 300px / 2;
    border: @border solid red;
    // 還能運行較複雜的運算
    border-radius: (@border - 5) * 2;


    // 由於前四位代表的ffff 換算成十進制已經分別到255了，再加就溢出了，
    // 因此即使加20，還是按照255算，因此還是ffff
    // 最後兩位的計算方式：
    // 十六進制轉成十進制 60 = 6 * 16 + 0 = 96
    // 使用十進制 進行運算 96 + 20 = 116
    // 將運算後的結果轉成16進制 116 / 16 結果是7餘4，那麼運算的結果就是74
    // 所以 #ffff60 + 20 最後的結果應該是： #ffff74
    color: #ffff60 + 20;

    // 40 + 20 = 60 換算成16進制  60/16 等於3餘12 所以結果爲 3c
    // 50 + 20 = 70 換算成16進制  70/16 等於4餘6 所以結果爲 46
    // 60 + 20 = 80 換算成16進制  80/16 等於5餘0 所以結果爲 50
    // 因此結果應該爲 #3c4650
    color: rgb(40, 50, 60) + 20;

}

運算符中間左右有個空格隔開，比如：10px + 5
對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
如果兩個值之間只有一個值有單位，則運算結果就取該單位

3.4.7 導入外部文件

我們知道，在css中，我們是可以導入其它樣式的，比如：

/* index.css */

/*
在這裏使用@import + 樣式路徑的形式導入其它樣式
注意：
	1. 必須在css開頭使用@import
	2. 結尾一定要有分號
*/
@import "./common.css";
/* 兩種寫法都正確 */
@import url("./common.css");

div:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: aqua;
}

/* common.css */
div:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: darkmagenta;
}

其實在less中，可以直接按照css的寫法處理，不過其自帶的也有類似的用法，和原來的css的略有不同：

// index.less
// 這裏不用謝後綴名
// 其實就相當於把需要導入的文件內容複製進來
@import "./common";

div:nth-child(1){
    width: 100px;
    height: 100px;
    background-color: aqua;
}

// common.less
div:nth-child(2){
    width: 100px;
    height: 100px;
    background-color: darkmagenta;
}

4. rem適配方案

目的和思路：

目的是讓各種顯示屏尺寸都能很好的顯示，同時還能儘量實現等比例全縮放
針對不同的屏幕寬度可以設計多個設計稿（也可以只採取一個標準稿，不過對於極端屏幕下可能會犧牲一點顯示效果，不過基本沒啥，其它設計稿根據標準稿直接等比例縮放得到）
對於每個設計稿使用rem作爲單位，達到在一個尺寸範圍內等比例縮放
對於設計稿之間切換，使用媒體查詢進行切換
總之就是：使用媒體查詢根據不同設備按比例設置html的字體大小，然後頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。

具體到技術層面的實現方案：

less + rem + 媒體查詢
flexible.js + rem

4.1 less + rem + 媒體查詢方案

① 假設設計稿是750px

② 假設我們把整個屏幕劃分爲15等份（劃分標準不一可以是20份也可以是10等份）

③ 每一份作爲html字體大小，這裏就是50px

④ 那麼在320px設備的時候，字體大小爲320/15就是 21.33px

⑤ 用我們頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的

⑥ 比如我們以750爲標準設計稿

⑦ 一個100100像素的頁面元素在 750屏幕下，就是 100/ 50 轉換爲rem 是 2rem2rem 比例是1比1

⑧ 320屏幕下， html字體大小爲21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1

⑨ 但是已經能實現不同屏幕下頁面元素盒子等比例縮放的效果

總結：

① 最後的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數）

② 屏幕寬度/劃分的份數就是 html 的 font-size 的大小

③ 或者：頁面元素的rem值 = 頁面元素值（px） / html 的 font-size 字體大小

案例：蘇寧首頁

移動端蘇寧首頁地址：http://m.suning.com

1、技術選型

方案：我們採取單獨製作移動頁面方案

技術：佈局採取rem適配佈局（less + rem + 媒體查詢）

設計圖：本設計圖採用 750px 設計尺寸

2、搭建文件結構

css/
images/
upload/
index.html

3、設置視口標籤以及引入初始化樣式

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">

4、設置公共common.less文件

新建common.less 主要用來設置最常見的屏幕尺寸，利用媒體查詢設置不同的html字體大小，因爲除了首頁其它頁面也需要針對不同屏幕的寬度處理。
我們關心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
劃分的份數我們定爲 15等份
因爲我們pc端也可以打開我們蘇寧移動端首頁，我們默認html字體大小爲 50px，注意這句話寫到最上面

// common.less
// 針對除了我們下面設置的寬度以外的寬度的效果，一定要寫到最上面，不然會覆蓋其它的，那麼媒體查詢效果就失效了
html {
    font-size: 50px;
}
// 我們此次定義的劃分的份數 爲 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

4.2 flexible.js + rem 方案

這是手機淘寶團隊出的一款簡潔高效的移動端可伸縮適配庫，有了它我們再也不需要在寫不同屏幕的媒體查詢，因爲裏面js做了處理。

它的原理是把當前設備劃分爲10等份，但是不同設備下，比例還是一致的。

我們要做的，就是確定好我們當前設備的html 文字大小就可以了，比如當前設計稿是 750px，那麼我們只需要把 html 文字大小設置爲 75px(750px / 10) 就可以了。

裏面頁面元素rem值計算方法： 頁面元素的px值 / 75

github地址：https://github.com/amfe/lib-flexible，下載完後，只需要將index.js或者index.min.js引入到我們的項目中即可。其它的有該文件幫我們自動處理了。

說明：該項目原來叫：lib-flexible，因爲有問題，現在叫amfe-flexible

總結：

因爲flexible是默認將屏幕分爲10等份，但是當屏幕大於750的時候希望不要再去重置html字體了，因此要自己通過媒體查詢設置一下，並且要把權重提到最高。

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

附：

VSCode 插件 cssrem ，他可以將我們像素單位自動的轉化成rem單位，不過，由於cssrem中參照的是html{font-size: 16px}進行轉換的，所以需要根據自己的實際情況進行配置。

按照我們自己的需求進行修改即可。修改完要重啓vs code。

目前最火的前端佈局方式：less+flex+媒體查詢

1. rem基礎

rem單位

2. 媒體查詢

2.1 什麼是媒體查詢

2.2 媒體查詢語法規範

2.2.1 mediatype 查詢類型

2.2.2 關鍵字

2.2.3 媒體特性

2.2.4 媒體查詢書寫規則

2.2.5 媒體查詢的另一種寫法之引入資源

2.3 媒體查詢 + rem

3. Less 入門

3.1 css的缺點

3.2 Less 介紹

3.3 Less安裝

3.4 Less的使用

3.4.1 編寫Less文件

3.4.2 變量

3.4.3 Less 編譯

爲vscode 安裝`easy less`插件

3.4.5 Less 嵌套

3.4.6 Less 運算

3.4.7 導入外部文件

4. rem適配方案

4.1 less + rem + 媒體查詢方案

4.2 flexible.js + rem 方案

常用的 Git 指令

sm4加密工具類

徹底理解前端工程優化難點之重繪、迴流和圖層

一篇文章徹底理解學會Vue插槽

如何使用vue圖形化頁面創建項目

對JavaScript 標籤語句的簡單理解

JavaScript數據類型和內存(內存泄漏、內存垃圾回收)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

目前最火的前端佈局方式：less+flex+媒體查詢

1. rem基礎

rem單位

2. 媒體查詢

2.1 什麼是媒體查詢

2.2 媒體查詢語法規範

2.2.1 mediatype 查詢類型

2.2.2 關鍵字

2.2.3 媒體特性

2.2.4 媒體查詢書寫規則

2.2.5 媒體查詢的另一種寫法之引入資源

2.3 媒體查詢 + rem

3. Less 入門

3.1 css的缺點

3.2 Less 介紹

3.3 Less安裝

3.4 Less的使用

3.4.1 編寫Less文件

3.4.2 變量

3.4.3 Less 編譯

爲vscode 安裝easy less插件

3.4.5 Less 嵌套

3.4.6 Less 運算

3.4.7 導入外部文件

4. rem適配方案

4.1 less + rem + 媒體查詢 方案

4.2 flexible.js + rem 方案

爲vscode 安裝`easy less`插件

4.1 less + rem + 媒體查詢方案