媒體查詢

　　可以根據顯示的寬度和高度來顯示哪些樣式。基本語法：media ( xxx : xxx ) { 樣式 }。

　　比如：

@media(max-width: 500px) {
      body {
        background: cyan;
      }

      #samrtphone h1 {
        display: block;
      }
    }

　　上述程式碼的意思是，當前寬度小於或等於 500px 的時候將 body 的背景色變為淺藍色，讓 id 為 samrtphone 下的 h1 顯示。

@media (min-width:501px) and (max-width:700px) 
 
{
      body {
        background: red;
      }

      #table h1 {
        display: block;
      }
    }

　　上述程式碼是，當寬度大於等於 501px 和小於等於 700px 的時候將 body 的背景色變為紅色，讓 id 為 table 下的 h1 顯示。

　　除了用寬度之外還可以用高度

    @media (max-height:500px) {
      body {
        background: orange;
      }

      #widescreen h1 {
        display
 
: block;
      }
    }

　　上述程式碼是，當前高度小於等於 500px 時將 body 的背景色變為橙色，讓 widescreen 下的 h1 顯示

　　除此之外還有另一種用法

  <link rel="stylesheet" media="(max-wdth:599px)" href="xxx.css">

　　指當前寬度小於等於 599px 時展示 xxx.css 裡的樣式。

　　em 和 rem 單位

　　em：優先根據自身的字型大小，如果沒有就找最近父元素或父盒子有設定字型大小的來進行換算。

　　　　如果當前父盒子的字型大小是 20px，那麼當前元素的 1.5em 就是 30px，如果當前父元素沒有設定字型大小那麼就向上尋找，直到找到有字型大小的或找到 html 根元素。

　　rem：根據根元素也就是 html 元素的字型大小進行換算。

　　　　直接根據 html 元素的字型大小來進行換算，如果 html 元素的字型大小是 10px，2rem 就是 20px。

 　　vw 和 vh 單位

　　vw 和 vh 指的是視窗檢視的寬度和高度

　　　　vh：把視窗檢視的高度分為 100 份，10vh 就是佔其中的 10 份
　　　　vw：把視窗檢視的寬度分為 100 份，10vw 就是佔其中的 10 份