Question

我的媒体查询遇到了一些麻烦。

使用购买的自适应wordpress主题构建网站，现在我正在对其进行自定义。

我遇到了一个问题，由于设计在一系列屏幕宽度上的表现如何，我会在设计中断时使用媒体查询进行调整。

麻烦的是，各种元素在不同的宽度上以不同的方式断裂（这并不奇怪）。

因此，不是获得一个漂亮的，独特的媒体查询大小范围（例如：max-width：480px，min-width：481px - ＆gt; max-width：780px，min-width：781px - ＆gt; max -width：960px，minwidth 961px）它变成了一堆重叠的查询。

以下是我目前在CSS中所获得的一个示例，为了节省空间而删除了CSS：

@media only screen and (max-width: 961px) {
    /* upto 961px */


@media only screen and (min-width: 885px) and (max-width: 961px) {
    /* 885px upto 961px */


@media only screen and (min-width: 768px) and (max-width: 884px) {
    /* 768px upto 884px */


@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* upto 767px */


@media only screen and (max-width: 550px) {
    /* Shrinks top nav text size for smaller screens*/


@media only screen and (min-width: 481px) and (max-width: 550px) {
    /* Adjusts search bar location*/


@media only screen and (max-width: 565px) {
    /* Toggles correct Justified Image Grid for home page buttons */


@media only screen and (min-width: 566px) and (max-width: 721px) {
    /* Toggles correct Justified Image Grid for home page buttons */


@media only screen and (min-width: 722px) and (max-width: 902px) {
    /* Toggles correct Justified Image Grid for home page buttons */


@media only screen and (min-width: 903px) {
    /* Toggles correct Justified Image Grid for home page buttons */

相当凌乱吧？请你好，我还在学习这些东西：）

所以我现在的主要问题是：我用最后4个媒体查询控制的元素（以Justified Image Grid为目标）包含非常简单的声明 - 基本上是否显示某些元素。我以为我已经相当专门地定义了这些查询，但它们并没有像我期望的那样工作。

问题可能与我的其他查询混乱有关吗？（即使在其他查询中没有引用Justified Image Grid？）

非常乐意接受有关如何在这种情况下处理查询的建议，我认为这种情况经常发生在Web构建中......

编辑：以下是测试页面的链接：http://dev.thecyclery.net.au/home-test/ 有两个图像网格元素，我只想一次显示一个。

谢谢！乔恩

Answer 1

简化一些事情的一种方法是删除具有最小值和最大值的查询的最小宽度部分。然后，在仅使用最大宽度查询时，您可以从最大到最小的顺序进行排序。

@media only screen and (max-width: 961px) {
}
@media only screen and (max-width: 884px) {
}
@media only screen and (max-width: 767px) {
}

当屏幕低于每个相应的设置时，它们会自动互相覆盖。

就我个人而言，我只使用最大宽度设置并相应地调整它们，希望如果你正确设置它，你可以躲过同样的事情。

您可能遇到问题的一个原因是，如果两个查询具有一些相同大小的参数（重叠条件），那么最后一个查询将优先于另一个，这可能不是您预期的结果。

（另外，我个人购买wordpress主题的经验并不令人满意，你通常最好定制_s或wordpress附带的二十几个主题之一。购买主题的麻烦在于它们通常设计有一个特定意图（或特定插件）......与您自己的意图几乎永远不同的意图。）

CSS媒体查询 - 混淆重叠和顺序

1 个答案: