使用rems在媒体查询中指定断点[关闭]

提问于 2024-04-29T13:03:05+08:00

浏览次

4

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

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

如果 body {} 中未定义基本字体大小，则它将继承浏览器默认字体大小 . 我听说使用 rems 是最好的做法 . 我的问题是，如果用户更改浏览器默认字体大小，则媒体查询将不会以预期的屏幕大小为目标 .

例如：

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

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

34rem (width of view port) = 480px (targeted viewport) / 14px (user changed)

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

1 回答

3
你是正确的，如果基本字体大小是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/
回复于 2024-04-29T13:03:05+08:00

相关问题