0
点赞
收藏
分享

微信扫一扫

【JS】对象遍历时属性顺序与定义时不一致

mafa1993 03-16 17:00 阅读 2
css

常用 单位:

  • 像素(px):像素是最常用的长度单位,它表示屏幕上的一个物理像素点。例如,width: 200px; 表示元素的宽度为200个像素点。

  • 百分比(%):百分比单位相对于父元素的尺寸进行计算。例如,width: 50%; 表示元素的宽度为父元素宽度的50%。

  • em:em单位是相于元素的字体大小计算的。例如,font-size: 1.5em; 表示元素的字体大小为父元素字体大小的1.5倍。 ( 我通常用来做段落缩进 text-indent:2em 

  • rem:rem单位也是相对于根元素(即html元素)的字体大小计算的。例如,font-size: 1.2rem; 表示元素的字体大小为根元素字体大小的1.2倍。

  • vh和vw:vh和vw单位分别表示视口高度和视口宽度的百分比。例如,height: 50vh; 表示元素的高度为视口高度的50%。

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        font-size: 20px;
      }
      .box1 {
        font-size: 1rem;
      }
      .box2 {
        font-size: 2rem;
      }
      .box3 {
        font-size: 3rem;
      }
    </style>
  </head>
  <body>
    <div class="box1">1rem</div>
    <div class="box2">2rem</div>
    <div class="box3">3rem</div>
  </body>
</html>
  • rem 除了可用于 font-size 外,还可以用于任意其他表示长度的属性,如 width,height 等

方案一  相对根元素响应 = 媒体查询 + rem

  • 使用媒体查询,随屏幕宽度的变化,调整根元素的 font-size
  • 使用单位 rem

 太累了,明天继续,

举报

相关推荐

0 条评论