Question

我在移动的第一个网站上工作。媒体查询使用ems设置：

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做同样的事吗？重申一下，我需要它，因此任何屏幕大小都将在最小或最大媒体查询中。我之间不能有“无人之地”。

由于可能在ems上有小数位，我认为以下不会起作用。一个屏幕可能是599.5ms宽，因此在两个媒体查询之间。

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

Answer 1

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

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

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

无人之地 如果你必须混合最小宽度和最大宽度的媒体查询，最好使用最大宽度的媒体查询，该查询等于你的下一个媒体查询的最小宽度，如@maioman的回答中所述，这应该摆脱“没有人的土地“差距问题。这样，最大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 2

我已经建立了一些包含最小和最大宽度媒体查询的网站，对我来说，他们很难维护并且实际上并没有添加任何价值。

我喜欢对移动优先网站使用最小宽度查询，因为我首先从最小屏幕宽度考虑我的设计然后随着宽度增加慢慢添加或更改功能。这有一个额外的好处，即消除'没有男人的土地＆＃34;问题。参见示例:(感谢@IMI计算像素宽度）

当您构建这样的网站时，您最终会在每个后续查询中指定从上一个查询中更改的所有内容，但行为也更容易预测，因为您的屏幕将分为一个类别或另一个类别，无论哪个类别它属于完全正在应用的属性。

＆＃13;

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;}
}

＆＃13;

<!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>

＆＃13;

Answer 3

因为如果您执行此类操作，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 4

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

可以使用以下公式从像素到em计算大小：pixels / 12（当前font-size）= em

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

在媒体查询中，“rem”以及“em”不是指根元素（html），而是直接指向浏览器默认值，只能使用基本字体大小的浏览器设置进行更改。这意味着即使您在html元素上指定了30px的字体大小，媒体查询仍将使用＆＃34;用户代理（浏览器＆＃39; s）初始字体大小＆＃34;作为媒体查询的“em”/“rem”，除非您还在浏览器设置中更改默认字体大小。

我将使用（为了数学）：

＆＃34;用户代理的初始字体大小＆＃34; = 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，屏幕可以在两个媒体查询之间。

可能你会说，我做了一些数学并解决了问题但是在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 
}

所以你唯一需要做的就是改变＆＃34; 10＆＃34;到用户代理（浏览器的）初始字体大小＆＃34;并先验数学。

我希望这对你有所帮助。

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

4 个答案: