我目前正在努力使商店响应,并且遇到以下问题。

我正在使用媒体查询来设计商店的样式,并且媒体查询中的特定范围不会完全适用。

它可以在其余媒体查询中完美运行,但是,在这一特定查询中,它不会进行任何更改。

这是我的一个WORKING媒体查询示例:

@media all and (max-width: 685px) and (min-width: 640px)
{
    #ShopMiddleHolderEShop {float:left; width:915px;}
    #rightSideHolder {padding-left:15px; width:37%; float:left; padding-bottom:8px;margin-right:50px;}
    .prodTable {float:left; width:105%}
    #prodListView {float:left; width:240px;}
    .prodTable td {width:130%; float:left;}
    .prodTmbHld {width:80%; margin:8px 0 0 0;/* display: list-item; *//* float: left; */}
    fieldset.prodTmb {/* float:left; */ margin:0 auto;padding:5px 0;width:99.5%; height:150px;}
    .prodTmbImg { width:145px; height:143px; float:right;}
    .prodTmbImg img { width:140px; height:140px; float:left}
    .prodDsc { padding-left:10px; float:left; width:145px; font-size:12px; line-height:14px}
}


这是行不通的范围!

@media all and (max-width: 640px) and (min-width: 590px)
{
    #ShopMiddleHolderEShop {float:left; width:915px;}
    #rightSideHolder {padding-left:15px; width:37%; float:left; padding-bottom:8px;margin-right:50px;}
    .prodTable {float:left; width:105%}
    #prodListView {float:left; width:auto; margin-right:320px;}
    .prodTable td {width:130%; float:left;}
    .prodTmbHld {width:70%; margin:8px 0 0 0;/* display: list-item; *//* float: left; */}
    fieldset.prodTmb {/* float:left; */ margin:0 auto;padding:5px 0;width:99.5%; height:150px;}
    .prodTmbImg { width:145px; height:143px; float:right;}
    .prodTmbImg img { width:140px; height:140px; float:left}
    .prodDsc { padding-left:10px; float:left; width:145px; font-size:12px; line-height:14px}
    #viewNav { float:left; width: 170px; border-right:1px solid #8FBCD1}
    #viewNav span { float:left; padding-left:8px}
    #viewNav a {float:left; border-right:1px solid #8FBCD1; padding:0 8px}
    #ShopUnderHeaderHolder { float:left; width:10%; background:#a8a8a8}
}


任何帮助将不胜感激!谢谢!

最佳答案

问题是我有重叠的CSS。

我不小心将相同的媒体查询复制并粘贴到正在处理的媒体查询上方,但尚未关闭。

例如:

@media all and (max-width:640px) and (min-width:590px)
{

/*Some code here*/


我删除了此代码,它运行良好!

关于html - 媒体查询的一部分无法正常工作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23338408/

10-11 23:28
查看更多