Question

我使用rems在媒体查询中指定断点，如下所示

<a ui-sref='home({foo: value, bar: value})'>klick me</a>

如果@media screen and (min-width: 30rem) {}中未定义基本字体大小，则它将继承浏览器默认字体大小。我听说使用 rems 是最好的做法。我的问题是，如果用户更改浏览器默认字体大小，则媒体查询将不会以预期的屏幕大小为目标。

例如：

body {}

用户将字体大小更改为14px然后

30rem (width of view port) = 480px (targeted viewport) / 16px (browser default)

作为解决方案，可以在body标签中定义字体大小。但这又类似于指定视图端口大小（以像素为单位）以及使得rems比像素更好的原因。

Answer 1

如果基本字体大小为16px，那么

是正确的

@media screen and (min-width: 30rem) {}

和

@media screen and (min-width: 480px) {}

都会给出相同的结果。

如果您使用浏览器放大，他们也会得到相同的结果。

正如您所指出的，如果用户重置其浏览器字体大小，则2个媒体查询会给出不同的结果。

有good pen on Codepen来说明这一点。

请注意，在此笔中，如果将浏览器字体大小设置为大于或小于16px，则基于绿色em的框会比视口小或大，因此在响应式设计中这不是理想选择。

所以我认为媒体查询中的px vs rem部分取决于您的个人偏好，部分取决于您的设计细节。

FWIW，响应式设计的一个简单选择是在媒体查询和rems（或ems）中使用px进行样式设置，例如：

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

来源：https://css-tricks.com/rems-ems/

使用rems在媒体查询中指定断点

1 个答案: