首页 文章

CSS断点和em单元

提问于
浏览 次
0

当我尝试在媒体查询中使用 em 单位时，我注意到该单元基于浏览器的默认字体大小，而不是 html 根 .
当断点为 min-width: 20em 时，当我要为元素宽度设置 20em 时，它工作奇怪 . 在这种情况下，两个单位都不相等，因为元素的 20em 基于 html font-size ，而媒体查询基于默认的浏览器字体大小 .

是否有办法使用 em 单位实现相同的大小而不为断点定义额外的单独变量（ @bp-size: 16.250em ）？

html {
  font-size: 0.813em;  // 13px (assume default browser font-size: 16px)
}

.box {
  width: 1em;          // 13px x 13px
  height: 1em;
  background-color: #000;
  

  // Problem
  
  @size: 20em; 

  @media screen and (min-width: @size) {     // 320px (20 x 16px) why not 260px?
    width: @size;                            // 260px (20 x 13px)
    background-color: #f00;
  }
}

<div class="box"></div>
css breakpoints em

2 回答

  • 2

    不久之后我问了这个问题 . 我终于在Media Queries page深埋的html-gods中找到了definitive answer .

    媒体查询中的相对单位基于初始值，这意味着单位永远不会基于声明的结果 . 例如，在HTML中，'em'单位相对于'font-size'的初始值 .

    您在html中设置的内容无关紧要，媒体查询将始终设置在 the browsers initial font-size 属性上 .

    回复于
  • 1

    这很有可能 - 你要找的是 rem 而不是 em ：

    @size: 20rem;

    rem 相对于 root 元素，而 em 相对于当前元素 . 有关这方面的更多信息，请参见W3和TutsPlus .

    希望这可以帮助！ :)

    回复于

相关问题