响应式网页设计

媒体查询

  @media (max-height: 800px) { /* 高度范围在[0, 800px]之间 */
    p {
      font-size: 10px;
    }
  }

使得图片不要超过页面宽度

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }

使用viewport相关的大小

<style>
  h2 {
      width: 80vw;
  }
  p {
      width: 75vmin;
  }
</style>

最后更新: 2020年1月12日