Question

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

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

我目前正在建立一个基于二十世界的儿童主题，其中这个最小宽度应该是885px而不是600px。

在二十分之内改变价值会很容易，但实际上并不是一个好的风格。也不会将相关的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仅受媒体查询的影响。

更改条件最小宽度CSS定义

1 个答案: