Question

我试图找出如何在我的最新项目中使用EM媒体查询。但经过一些测试后，我发现媒体查询有点偏差，我无法解决原因。它可能与父项字体大小而不是正文有关。我的身体设置为14px，我的工作外观如下：

$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px

正文字体大小：

body{
    font-size: 14px;
    line-height: 1.5;
    min-height: 100%;
}

*（来自我的SCSS断点变量）根据我的理解，我做了：768/14（基本字体大小）= em中的宽度

我说div被称为标题，此font-size上没有设置div，只有div的子项。当然它仍会使用身体font-size？

Answer 1

媒体查询中的Ems永远不会基于body的字体大小或任何其他元素。它们始终引用用户在浏览器首选项中设置的默认字体大小。在大多数浏览器中，此默认字体大小约为16px，而在CSS中，这对应于font-size属性medium的初始值。来自spec：

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

相同的默认字体大小由根元素继承，即html，不 body（请参阅here）。在body上指定相对字体大小只意味着body将自己的计算基于html的计算字体大小。如上所述，请注意，在font-size上设置html 不会影响在媒体查询中计算ems的方式。

Answer 2

您的猜测是正确的，em单位设置相对于父元素字体大小的字体大小，而不是相对于文档根目录。如果您正在寻找后者，那么您正在寻找rem单元，但browser support可能会对您造成问题，具体取决于您的申请。

请参阅以下小提琴获取示例：http://jsfiddle.net/afp46/

HTML：

<span >This is text</span>

<div><span >This is text</span></div>

<span><span>This is text</span></span>

CSS：

body {
    font-size: 14px;
}

div {
    font-size: 16px;
}

span {
    font-size: 1.2em;
}

Answer 3

我会将其更改为正文字体大小100％然后您具有EMs和％s网站范围的灵活性

Answer 4

我强烈建议您使用rem进行字体大小调整，代表“root em”。它更加一致。在此处阅读更多相关信息：http://snook.ca/archives/html_and_css/font-size-with-rem

另外，我建议将其添加到CSS中：

html {
    font-size: 62.5%;
}

现在，你的rems或ems很容易转换。 10px font-size将是1rem或1em。很好，对吧？ :)再次，使用rems，这是一种更好的做法。

Answer 5

请尝试使用此代码。我已经使用了我的上一个项目，它运行正常。所以请尝试。

// Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px. */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px  */

@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

如何计算基于EM的媒体查询

5 个答案: