Question

我无法更改移动设备上一个元素的填充。查询适用于多个属性，但填充不起作用（如果我尝试使用它，行高也不会）。自定义CSS中的基本样式是：

#topright {
font-size: 20px;
    letter-spacing: 4px;
    color: rgba(255,255,255,1.0);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-weight: 200;
}

手机的媒体查询

/* Custom, iPhone Retina */ 
 @media only screen and (min-width : 320px) {
        .header-2 .logo  {
    width: 250px;
    }   
    .footer-widget ul li {
            width: 100%;
    }
    .footer-widget ul {
    padding-left: 0;
    padding-right: 0;
    }
    div.vc_column-inner vc_custom_1476556729591 {
    padding-left: 0;
    padding-right: 0;
    }
    .footer-widget .textwidget p {
        text-align: center;
    }
    #topright {
    padding-top: 1px;
    padding-bottom: 1px
    }   
}

不会应用较小的填充数。如果我从main css中删除！important，则电话查询将应用于所有设备。这很奇怪，因为电话查询的所有其他属性都运行良好。

Answer 1

来自媒体查询的this helpful page，min-width: 320px表示：

"If [device width] is greater than or equal to 320px, then do {...}"

换句话说，您认为自己创建的仅定位到iPhone的媒体查询实际上会针对宽度为320像素或大的所有设备触发。相反，我认为您打算使用max-width

所以使用这个CSS：

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .header-2 .logo  {
        width: 250px;
    }   
    ...
    #topright {
        padding-top: 1px;
        padding-bottom: 1px
    }
}

您还应该从!important文件中删除main.css指令。

媒体查询仅对一个属性失败

1 个答案: