html - 减少移动设备中的左填充

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;
        }
    }