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

时间:2014-06-10 02:01:15

标签: css media-queries

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

http://fnd.instinctdigitalmedia.com/

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

2 个答案:

答案 0 :(得分:0)

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

实施例:                                          #content> img {width:25%;}     }

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

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

答案 1 :(得分:0)

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

第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 */
}