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";        }      }