rem適配佈局

rem基礎

rem單位

  • rem(root em)是一個相對單位類似em，em是相對於父元素字體大小。
  • 不同的是rem的基準是相對於html元素的字體大小
  • rem的優點就是可以通過修改html中的字體大小來修改頁面中元素的大小可以控制整體。

媒體查詢

  • media Query是CSS3新特性
  • 使用@media查詢可以針對不同的媒體類型定義不同的樣式
  • @media可以針對不同的屏幕尺寸設置不同的樣式
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

注意：

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

1. mediatype 查詢類型

- 將不同的終端設備劃分成不同的類型，稱為媒體類型  （理解為設備類型，非屏幕，屏幕）
- all 所有設備
- print 用於打印設備
- screen 用於電腦屏幕，智能手機等。

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

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

3.媒體特性
每種媒體類型都具有各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格
我們暫且瞭解三個：（注意他們要加小括號包含）

  • width 定義輸出設備中頁面的可見區域的寬度
  • max-width 定義輸出設備中頁面的最大可見區域的寬度
  • min-width 定義輸出設備中頁面的最小可見區域的寬度
<style>
        /* 這句話的意思就是： 在我們屏幕上 並且 最大的寬度是 800像素 設置我們想要的樣式 */
        /* max-width 小於等於800 */
        /* 媒體查詢可以根據不同的屏幕尺寸在改變不同的樣式 */
        
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
       /* 總結：媒體查詢， 檢測媒體（手機，電腦），的特徵變化*/
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>
</head>

<body>

</body>

媒體查詢+rem案例

效果： 屏幕大小變化時，購物車的字體，以及所在盒子的高度也在變化：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 從小到大的順序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            /* 高度，字體大小，都設置為rem單位，即可根據html的font-size的改變而改變*/
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">購物車</div>
</body>

總結：

  • rem+媒體查詢，實現屏幕大小改變，界面元素跟着一起改變的原理，實現順序：
  • 媒體查詢作用，根據屏幕尺寸的範圍，來切換html的font-size （界面元素的參照物跟着屏幕改變）
  • 界面元素的大小都以rem為單位（rem代表參照物html的font-size）
媒體查詢引入資源
  • 當界面大小變化時，整個界面的結構有較大的變化時，我們會使用媒體查詢引入資源。
  • 針對不同大小的界面，準備不同的css樣式文件，當界面大小變化時，直接改變引入的css樣式文件，這就是媒體查詢引入資源。
<style>
        /* 當我們屏幕大於等於 640px以上的，我們讓div 一行顯示2個 */
        /* 當我們屏幕小於640 我們讓div一行顯示一個 */
        /* 一個建議： 我們媒體查詢最好的方法是從小到大 */
        /* 引入資源就是 針對於不同的屏幕尺寸 調用不同的css文件 */
    </style>
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>

<body>
    <div>1</div>
    <div>2</div>
</body>

less 基礎

Less 介紹
  • Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成為CSS預處理器。
  • 做為 CSS的一種形式的擴展，它並沒有減少CSS的功能，而是在現有的CSS語法上，為CSS加入程序式語言的特性。
  • 它在CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，並且降低了 CSS的維護成本，就像它的名稱所説的那樣，Less可以讓我們用更少的代碼做更多的事情。
  • Less中文網址：http://lesscss.cn/
  • 常見的CSS預處理器：Sass、Less、Stylus
  • 一句話：Less是一門 CSS 預處理語言，它擴展了CSS的動態特性。
Less安裝

①安裝nodejs，可選擇版本(8.0)，網址：http://nodejs.cn/download/

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

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

npm：node package manager，node包管理工具

less是作為node中的一個工具包存在的，所以通過npm安裝

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

Less使用

Less 使用之變量

  • 變量是指沒有固定的值，可以改變的。
  • 理解：變化的量，變化的內容，變化的值。
  • 語法：
    @變量名:值;
    如：
    @color: pink;

注意：

  • 必須有@為前綴
  • 不能包含特殊字符
  • 不能以數字開頭
  • 大小寫敏感
// 定義一個粉色的變量
    @color: pink;  
    // 錯誤的變量名  @1color   @color~@#
    // 變量名區分大小寫  @color  和  @Color 是兩個不同的變量
    // 定義了一個 字體為14像素的變量
    @font14: 14px;
    body {
        background-color: @color;
    }
    div {
        color: @color;
        font-size: @font14;
    }
    a {
        font-size: @font14;
    }

總結：

  • 定義了一個粉色的變量，body和div都使用了這個變量。那麼我們如果想要將body和div的顏色一起修改為另一個顏色，只需要修改變量的值即可，簡單方便
  • 一般將使用次數比較多的內容，定義為變量，然後通過使用變量，來使用到變量的值

Less 嵌套

less嵌套寫法如下：

/*我們經常用到選擇器的嵌套 (選擇器組合使用：後代選擇器)*/
   #header .logo {
     width: 300px;
   }
   /* less中的選擇器嵌套寫法 */
   #header {
       .logo {
          width: 300px;
       }
   }
   ````
   

如果遇見 （交集|偽類|偽元素選擇器） ，利用&進行連接

```css
   a:hover{
       color:red;
   }
   a{
     &:hover{
         color:red;
     }
   }
```



### Less 運算

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

 

```css
 /*Less 裏面寫*/
   @witdh: 10px + 5;
   div {
       border: @witdh solid red;
   }
   /*生成的css*/
   div {
     border: 15px solid red;
   }
   /*Less 甚至還可以這樣 */
   width: (@width + 5) * 2;
```
   

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