由于使用 ems，最小和最大媒体查询出现问题？

Question

我正在开发移动优先网站。媒体查询是用 em 设置的，如下所示：

html {
    font-size: 62.5%;
}
body {
    font-size: 16px;
    font-size: 1.6rem;
}

@media (min-width: 320em) {
}
@media (min-width: 600em) {
}
@media (min-width: 770em) {
}

我现在需要在与我的中间媒体查询相同的断点下方添加一个最大宽度媒体查询，以便任何屏幕尺寸都是其中之一。

如果我使用 px，这会很简单：

@media (max-width: 599px) {
}
@media (min-width: 600px) {
}

ems 也可以吗？重申一下，我需要它，所以任何屏幕尺寸都将在最小或最大媒体查询中。我不能在两者之间有任何 'no mans land'。

因为 ems 可能有小数位，所以我认为下面的方法行不通。一个屏幕可以是 599.5ems 宽，因为在 2 个媒体查询之间。

@media (max-width: 599em) {
}
@media (min-width: 600em) {
}

Answer 1

因为 min-width 将覆盖 max-width 如果你这样做你应该是安全的：

@media screen and (max-width: 600em) {
}
@media screen and (min-width: 600em) {
}

div {
    width:5em;
    height:5em;
}
@media screen and (max-width: 12em) {
    div {
        background:green
    }
}
@media screen and (min-width: 12em) {
    div {
        background:red
    }
}

<div>test</div>

fiddle

Answer 2

是的，您可以在基于 em 的媒体查询中使用小数。

媒体查询的 em 值将基于浏览器的“initial”字体大小值。这通常是 16px。因此，您通常可以通过将像素值除以 16 来安全地计算基于 em 的媒体查询。

示例： 要获得等同于 @media (min-width: 600px) 的 em，您可以将 600px 除以 16，这将导致 37.5 和媒体查询 @media (min-width: 37.5em)

无人区： 如果您必须混合使用最小宽度和最大宽度媒体查询，最好使用最大宽度媒体查询，它等于@maioman 的回答中所述的下一个媒体查询的最小宽度，并且应该摆脱 "no man's land" 间隙问题。这样，最大 600px 的设备将使用所有样式，包括 max-width:37.5em 样式，而具有更高分辨率的设备将使用以下相关样式，包括 min-width:37.5em.

带小数的基于 em 的媒体查询片段示例：

html {
    font-size: 62.5%;
}
body {
    font-size: 16px;
    font-size: 1.6rem;
 color:black;
}

@media (min-width: 20em) { /* = 320px */
 body {color:red;} /* You wont see this color since the max-width media query is overrides it */
}
@media (max-width: 37.4375em) { /* = 599px */
 body {color:green;} /* Be careful where you place the max-width media query. It will override the smaller min-width if placed after. */
}
@media (max-width: 37.5em) { /* = 600px */
 body {color:green;} /* As stated in @maioman's answer, using a max-width that equals the min-width of your next media query should get rid of the "no man's land" problem. */
}
@media (min-width: 37.5em) { /* = 600px */
 body {color:pink;}
}
@media (min-width: 48.125em) { /* = 770px */
 body {color:cyan;}
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>

Answer 3

我已经建立了几个具有最小和最大宽度媒体查询的网站，对我来说，它们很难维护并且实际上没有增加任何价值。

我喜欢对移动设备优先的网站使用最小宽度查询，因为我首先从最小的屏幕宽度开始考虑我的设计，然后随着宽度的增加慢慢添加或更改功能，这对我来说很有意义。这具有消除 "no man's land" 问题的额外好处。参见示例：（感谢@IMI 计算像素宽度）

当您构建这样的网站时，您最终会在每个后续查询中指定与上一个查询相比发生变化的所有内容，但行为也更容易预测，因为您的屏幕将属于一个类别或另一个类别，并且无论它属于哪一个，您都确切地知道应用了哪些属性。

html {
    font-size: 62.5%;
}
body {
    font-size: 16px;
    font-size: 1.6rem;
 color:black;
}

@media (min-width: 20em) { /* = 320px */
 body {color:red;}
}
@media (min-width: 30em) { /* = 480px */
 body {color:green;} 
}
@media (min-width: 37.5em) { /* = 600px */
 body {color:pink;}
}
@media (min-width: 48.125em) { /* = 770px */
 body {color:cyan;}
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>

Answer 4

“em”是一个可缩放的单位。一个em等于当前的font-size，比如文档的font-size是12px，1em就等于12px。 Ems 本质上是可扩展的，因此 2em 等于 24px，.5em 等于 6px，等等

可以使用以下公式从像素到 em 计算大小：pixels/12(current font-size)=em

查看 http://www.w3schools.com/css/css_font.asp

在媒体查询中，“rem”和“em”不指代根元素 (html)，而是直接指代浏览器默认值，只能使用基本字体的浏览器设置进行更改尺寸。这意味着即使您在 html 元素上指定 30px 的字体大小，媒体查询仍将使用 "user agent's (browser's) initial font-size" 作为媒体查询的“em”/“rem”，除非您也更改默认值浏览器设置中的字体大小。

我将使用（为了数学的好处）：

"user agent's initial font-size" = 10px;

假设你有：

@media (max-width: 59em) {
}

@media (min-width: 60em) {
}

当浏览器计算 em 时，将等于：

@media (max-width: 590px) { // 59 * 10(supposed font-size)
}

@media (min-width: 600px) { // 60 * 10(supposed font-size)
}

这里有一个 10px 的范围，其中屏幕可以在 2 个媒体查询之间。

可能你会说，我做了一点数学并解决了问题，但是在 css 中做数学有 calc

像这样：

@media (max-width: calc(60em - 1px);) { // 60 * 10 = 600px - 1px = 599px
}

@media (min-width: 60em) {  // 60 * 10 = 600px 
}

可惜calc() not working within media queries.

但是 1px = 0.1em 1 / 10(supposed font-size)

所以你必须先验算一下：

@media (max-width: calc(59.9em);) { // 60em - 0.1em(1px) = 59.9 * 10 = 599px
}

@media (min-width: 60em) {  // 60 * 10 = 600px 
}

因此，您唯一需要做的就是将“10”更改为 "user agent's (browser's) initial font-size" 并先验计算。

希望对您有所帮助。

由于使用 ems，最小和最大媒体查询出现问题？

Issue with min and max media queries due to using ems?

css

media-queries