响应式布局

媒体查询

　　可以根据显示的宽度和高度来显示哪些样式。基本语法：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 份