媒体查询调整跨度字体大小
media query resize span font-size
我在 wordpress 工作。
我有一个大小为
的特定跨度标签
<span id="some_id" style="font-size: 26px;">Some title</span>
当屏幕、视口变小时，我想让它减小字体大小，比如：
@media screen and (max-width: 640px) {
#some_id{font-size:15px;}
}
但是没用！此媒体屏幕内的所有其他规则均有效，但此规则除外
为什么？谢谢！
内联样式会覆盖您的 css。 css 的出现顺序决定了哪个最重要。如果你需要避免这个问题，你需要考虑两种解决方案（select什么对你更好）
解决方案 1
<span id="some_id" class="font26">Some title</span>
.font26 { font-size: 26px; }
解决方案 2
@media screen and (max-width: 640px) {
#some_id{font-size:15px !important;}
}
如果您不知道 !important 运算符是如何工作的，那么它是很危险的。首先，了解 css 是如何渲染的以及他的优先级。
祝你好运
我在 wordpress 工作。 我有一个大小为
的特定跨度标签<span id="some_id" style="font-size: 26px;">Some title</span>
当屏幕、视口变小时，我想让它减小字体大小，比如：
@media screen and (max-width: 640px) {
#some_id{font-size:15px;}
}
但是没用！此媒体屏幕内的所有其他规则均有效，但此规则除外
为什么？谢谢！
内联样式会覆盖您的 css。 css 的出现顺序决定了哪个最重要。如果你需要避免这个问题，你需要考虑两种解决方案（select什么对你更好）
解决方案 1
<span id="some_id" class="font26">Some title</span>
.font26 { font-size: 26px; }
解决方案 2
@media screen and (max-width: 640px) {
#some_id{font-size:15px !important;}
}
如果您不知道 !important 运算符是如何工作的，那么它是很危险的。首先，了解 css 是如何渲染的以及他的优先级。
祝你好运