Question

我遇到了某些页面元素的奇怪且非常令人沮丧的问题（使用h1.brand不同的em大小被忽略作为一个示例），尽管修改了CSS，但在响应的断点处不会缩小大小，甚至会增加大小使用传统的媒体查询。使用Google Chrome开发人员工具时，它会将这些元素显示为与给定屏幕尺寸相反或至少不正确的媒体查询。

帮助，我搜索并尝试了许多不同的修复，但没有运气，

感谢您的帮助，

TVprodDude

网站现已发布在tvadpros.com

下面是几个媒体查询 - 位于主css样式表的顶部 - 也许我在这里有问题：

@media (min-width: 480px) {
.container {
    width: 440px;
    margin-right: auto;
    margin-left: auto; 
}

h1.brand {
    font-size: 2em;
    padding-left: 20px;
    padding-right: 20px;
}

}

/* Small Devices (tablets, 768px and up) */
@media (min-width: 768px) {
.container {
    width: 720px;
    margin-right: auto;
    margin-left: auto; 
}
.column {
    /* float: left; */
    margin-right: 10px;
    margin-left: 10px;
}

h1.brand {
    font-size: 3em;
    padding-left: 20px;
    padding-right: 20px;
}

/* .row {
    overflow: hidden;
}  */

ul.sdt_menu {
    /*margin-left:500px; */
    padding: 0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:12px;
    width: 640px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:100px;
    height:45px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:45px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:45px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:15px;
    left:0px;
    width:100px;
    height:45px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:45px;
    width:100px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left: 8px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size: 15px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#f5f5f5;
    float:left;
    clear:both;
    width:95px; /*For dumbass IE7*/
    font-size: 9px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:100px;
    overflow:hidden;
    height:140px;
    top:65px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:25px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top: 9px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}
/* img.size-chg {
    width: 140px;
    height: 140px; */
}
/* End nav menu for min 768px width */

/ *中型设备，台式机，992px及以上* / @media（min-width：992px）

Bootstrap 3.1.1媒体查询是否已反转？

0 个答案: