如何在twitter bootstrap 3中将'pixel‘媒体查询更改为'em’媒体查询
如何在twitter bootstrap 3中将'pixel‘媒体查询更改为'em’媒体查询
提问于 2013-12-21 09:03:57
我想将twitter bootstrap 3中基于‘像素’的媒体更改为基于'em‘的媒体查询。
举个例子：
@media only screen和(max-width: 320px){}等于@media only screen和(max-width: 20){} @media only screen和(max-width: 480px){}等于@media only screen和(max-width: 30){}，依此类推。
是否有一种更简单的方法在bootstrap.css文件中执行此操作，而不是手动更改所有媒体查询，因为手动更改所有媒体查询将花费大量时间。
提前感谢
拉杰
回答 3
Stack Overflow用户
发布于 2016-03-29 23:02:52
您可以在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中的所有媒体查询执行此操作，即可完成此操作。
Stack Overflow用户
发布于 2014-02-28 05:37:51
我认为您可以使用引导自定义程序将您的媒体查询更改为ems，但我还没有确认这一点。http://getbootstrap.com/customize/
Stack Overflow用户
发布于 2013-12-21 09:42:11
您只需在值的末尾添加'em‘，就像我现在编辑的那样
@媒体纯屏幕和(max-width: 320em) { max-width:320em；width:100%;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20714306
复制相关文章
相似问题
腾讯云开发者
