是否使WordPress图库(.Gallery-Item)具有响应性？

库的短代码：[gallery link="file" columns="5" size="medium"]

我在一个网站的内页上使用了一个5列的图库，显然当该网站对移动设备甚至平板设备做出响应时，图库中的图像会保持默认的样式width: 20%; 看起来太小了。

我尝试添加媒体查询样式以增加百分比宽度，但WP仍然应用列类.gallery-columns-5.

理想情况下，桌面上有5列图像，平板电脑有3列，移动设备有1列。

有谁知道有什么好办法吗？

/ ## Gallery
--------------------------------------------- */

.gallery {
    overflow: hidden;
}

.gallery-item {
    float: left;
    margin: 0 0 30px;
    padding: 0 5px;
    text-align: center;
    width: 100%;
}

.gallery-columns-5 .gallery-item {
    width: 20%;
}

.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1),
.gallery-columns-5 .gallery-item:nth-child(5n+1),
.gallery-columns-6 .gallery-item:nth-child(6n+1),
.gallery-columns-7 .gallery-item:nth-child(7n+1),
.gallery-columns-8 .gallery-item:nth-child(8n+1),
.gallery-columns-9 .gallery-item:nth-child(9n+1) {
    clear: left;
}

.gallery img {
    border: 1px solid #ddd;
    height: auto;
    padding: 4px;
}

.gallery img:hover {
    border: 1px solid #999;
}

@media only screen and (max-width: 800px)

.gallery-item {
    width: 33%;
}

/* For displaying 3 columns on tablet */ @media only screen and (max-width: 800px) { .gallery-columns-5 .gallery-item { width: 33%; } } /* For displaying single column on mobile */ @media only screen and (max-width: 480px) { .gallery-columns-5 .gallery-item { width: 100%; } } .gallery-columns-5 .gallery-item:nth-child(5n+1) { clear: none; }

我如何让短码，小工具和模板标签的css加载在头部只有需要？

我有一个短代码，小部件和模板标签，需要加载CSS。我正在init中注册，并根据需要排队。唯一的问题是，它将CSS加载程序添加到页面的底部，而不是头部，因此在短代码/小部件/模板标记的内容未设置样式的情况下，可能会出现严重的延迟。鉴于这些内容可能会出现在页面流中的任何人身上，甚至可能不会出现，因此无法在页面开始呈现之前进行预测。它只需等待，直到遇到它们，然后将队列挂接到wp\\u head挂钩就为时已晚了。我想不出怎么可能避免这种情况，所以目前在加载css之前隐藏内容。然而，如果有人知道一些魔术，那就太好了

相关推荐

我如何让短码，小工具和模板标签的css加载在头部只有需要？