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

概述我使用rems在媒体查询中指定断点,如下所示 @media screen and (min-width: 30rem) {} 如果未在body {}中定义基本字体大小,则它将继承浏览器默认字体大小.我听说使用rems是一种最佳实践.我的问题是,如果用户更改浏览器默认字体大小,则媒体查询将不会以预期的屏幕大小为目标. 例如： 30rem (width of view port) = 480px (t 我使用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比像素更好的原因.

解决方法 你是正确的,如果基本字体大小是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/

总结

以上是内存溢出为你收集整理的html – 使用rems在媒体查询中指定断点全部内容，希望文章能够帮你解决html – 使用rems在媒体查询中指定断点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。