Question

网站我一直在努力开始忽略所有媒体查询。我似乎无法找到问题。

http://fnd.instinctdigitalmedia.com/

在主页上，浏览我们的产品＆＃34;部分根据屏幕宽度改变。在320px，480px和768px的屏幕宽度下，它仍然显示原件。

Answer 1

您必须以祖先或父级为目标来覆盖先前查询所执行的操作。从760px覆盖其样式规则，您应该添加调用img的父#content以覆盖760px中的规则

实施例： #content＆gt; img {width：25％;} }

@media screen and (max-width : 480px){
   #content > img {width:50%;}
}

@media screen and (max-width : 760px){
    img {width:100%;}
}

Answer 2

我可以看到一些问题。首先，媒体查询没有被解雇，因为：

第899行有一个关闭的括号，翻转错误。为了找到这个，我添加了我自己的媒体查询，显示了一些明显的东西，并将其粘贴在CSS的顶部，然后进一步向下，直到它停止工作。

此外，移动视图失败，因为您在媒体查询中缺少“和”：

@media only screen (min-width: 320px) and (max-width: 480px) {}

应该是：

@media only screen and (min-width: 320px) and (max-width: 480px) {

至于宽度休息本身，响应式设计的一个方便技巧是在你开始造型之前限制这种问题（这是一个粗略的指南，而不是一个全面的列表）：

img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
    max-width:100% !important;
}

即使重新指定图像的宽度，您仍然使用像素宽度而不是像percentages这样的相对测量。这意味着图像将保持静态大小，无论如何都不会正确调整大小。

最后，您使用“括号”方法进行媒体查询。这意味着不是允许现有的CSS级联媒体查询，而是必须指定两次不会改变的东西，必须多次重复相同的代码。

例如，您目前有：

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-cat-1 {
        position: relative;
        display: block;
        margin: 0 auto 10px auto;
        width: 430px;
        height: 150px;
        background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
    }
}

必须重新指定768px以下的任何内容。这会导致大量的重复代码，并为您提供大量额外的工作。更简单的方法是：

@media only screen and (max-width: 1024px) {
    /* all styles for under 1024px  */
}

然后是小事：

@media only screen and (max-width: 768px) {
    /* only styles that need to change when under 768px wide */
}

网站justed忽略了移动设备上的所有媒体查询

2 个答案: