RWD

1. RWD设计模式

https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=zh-tw
https://codepen.io/Rouoxo/pen/qBVRMBz

2. vh、vw、vmax、vmin

https://codepen.io/Rouoxo/pen/ZEaLRmp

      .first {
        background-color: lightcoral;
        width: 75vw;
        height: 50vh;
      }

      .second {
        background-color: lightskyblue;
        width: 25vmax;    /* vmax当前vw和vh中较大的值  25％ / 75vw   */
        height: 25vmin;   /* vmin当前vw和vh中较小的值  25％ / 50vh  */
      }

3. orientation：萤幕方向，用於检查视窗 viewport

https://codepen.io/Rouoxo/pen/JjOWJGM

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }

4. aspect-ratio：纵横比 (div才能使用)

https://codepen.io/Rouoxo/pen/gOXmRry

      <div class="aspect-ratio">４比３</div>
      
      .aspect-ratio {
        aspect-ratio: 4 / 3;
        background-color: aqua;
        margin: 0 0 1rem 0;
      }

5. em、rem

(1) em 的文字大小基准取决於父层的文字大小，所以建议使用在限制区域
(2) rem 的文字基准取决於最外层 html 文字大小，适合 RWD 响应式网页
https://codepen.io/Rouoxo/pen/mdqRxLd

6. @media screen

https://codepen.io/Rouoxo/pen/YzENavm

      /* max-width：表示设定数值「小於等於」、「以下」 */
      /* 700~1000之间 */
      /* 最小700最大1000 */
      @media only screen and (min-width: 700px) and (max-width: 1000px) {
        div {
          background-color: green;
        }
        div::before {
          content: "此时最小700最大1000";
        }
      }