网站我一直在努力开始忽略所有媒体查询。我似乎无法找到问题。
http://fnd.instinctdigitalmedia.com/
在主页上,浏览我们的产品"部分根据屏幕宽度改变。在320px,480px和768px的屏幕宽度下,它仍然显示原件。
答案 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 */
}