如何在 twitter bootstrap 3 中将“像素”媒体查询更改为基于“em”的媒体查询答案

【问题标题】：How to change 'pixel' media queries to 'em' based media queries in twitter bootstrap 3如何在 twitter bootstrap 3 中将“像素”媒体查询更改为基于“em”的媒体查询
【发布时间】：2014-01-09 22:42:48
【问题描述】：

我想将 twitter bootstrap 3 中基于“像素”的媒体更改为基于“em”的媒体查询。

例如：

@media only screen and (max-width: 320px){} 将等于 @media only screen and (max-width: 20){} @media only screen and (max-width: 480px){} 将等于 @media only screen and (max-width: 30){} 等。

有没有更简单的方法在 bootstrap.css 文件中执行此操作，而不是手动更改所有媒体查询，这将花费大量时间。

提前致谢

拉吉

【问题讨论】：

标签： html css twitter-bootstrap twitter

【解决方案1】：

您可以在bootstrap.css 文件中手动更新媒体查询，只需片刻。

按照此模式target/context = result 将px 值转换为em。重要提示：使用 em 定义的媒体查询始终基于 16px，无论基本字体大小设置为多少（在 Bootstrap 3 中为 14px）。

h2{
  font-size: 2em /* 32px / 16px = 2em */
}

到

@media (min-width: 48em) {} /* 768px / 16px = 48em */

对bootstrap.css 中的所有媒体查询执行此操作即可完成。

【讨论】：

如果您使用的是 BT 的 sass 版本，您只需在一处覆盖变量即可，瞧。

【解决方案2】：

我认为您可以使用 boostrap 定制器将您的媒体查询更改为 em，但我尚未确认这一点。 http://getbootstrap.com/customize/

【讨论】：

【解决方案3】：

您只需在值的末尾添加“em”，我现在正在编辑

@media 仅屏幕和（最大宽度：320em） {最大宽度：320em；宽度：100%;}

【讨论】：

嗨，320px 不是 20em (320/16) 16 是基本字体大小。此外，还有数百个媒体查询需要更改，因此必须通过 LESS 或 SASS 更快地进行更改。
您好，有人知道这是怎么做的吗？