减少移动设备中的左侧填充

Question

我有div，我为所有尺寸的设备提供了一些填充。但我的一位客户希望在浏览手机时减少左侧填充。这是代码 -

.price-form {
background: #438bc7 none repeat scroll 0 0;
padding: 19px 30px 10px 75px;
color: #ffffff;}

我需要在移动设备中填充padding: 19px 30px 10px 25px;。

提前致谢。

修改

我使用了以下代码

@media screen and (min-width : 480px){
.price-form {
    background: #438bc7 none repeat scroll 0 0;
    padding: 19px 30px 10px 25px;
    color: #ffffff;
}}
@media screen and (min-width : 978px){
.price-form {
    background: #438bc7 none repeat scroll 0 0;
    padding: 19px 30px 10px 75px;
    color: #ffffff;
}}

UI在笔记本电脑中完全匹配，但在移动设备中却不匹配。

Answer 1

使用媒体查询。 Here是一个很好的参考。

   @media screen and (max-width : 480px){
        .price-form {
            padding: 19px 30px 10px 25px;
        }
    }

Answer 2

如果您需要在移动设备上填充padding: 19px 30px 10px 25px;，则需要使用max-width媒体查询。您可以根据需要更改最大宽度的像素。

@media only screen and (max-width : 480px){
    .price-form {
        padding: 19px 30px 10px 25px;
    }
}