css - 更改条件 min-width CSS 定义

Question

我发现如果屏幕太窄，Wordpress 主题二十二中的折叠菜单会转换为下拉菜单，这是基于二十二/style.css 中的条件规则

@media screen and (min-width: 600px) {
    [css rules for actual elements if conditon above applies]
}

我目前基于二十二构建一个子主题，其中最小宽度应该是 885 像素而不是 600 像素。

在 212 范围内更改值会很容易，但并不是一种很好的风格。也不会将相关的 css 复制粘贴到孩子中并对其进行调整。

有纯 CSS 的优雅方式吗？

我很确定可以使用脚本进行一些解决方法

（是的，我知道有第二十三个主题）

Answer 1

这是纯粹的 CSS 方式，但是......从我最喜欢的主题中，尝试响应式 jQuery 规则：

/*
Responsive jQuery is a tricky thing.
There's a bunch of different ways to handle
it, so be sure to research and find the one
that works for you best.
*/

/* getting viewport width */
var responsive_viewport = $(window).width();

/* if is below 481px */
if (responsive_viewport < 481) {

} /* end smallest screen */

/* if is larger than 481px */
if (responsive_viewport > 481) {

} /* end larger than 481px */

/* if is above or equal to 768px */
if (responsive_viewport >= 768) {


}

/* off the bat large screen actions */
if (responsive_viewport > 1030) {

}

或者您可以通过添加 style="" 属性并格式化您在其中的媒体查询将其硬编码到模板文件中。这只会使该模板中的那个 div 受媒体查询影响。