html - 媒体查询和文本

Question

我正在尝试找到一种放置标题和副标题的方法，以便它们彼此对齐。但是当我让它适合一台设备时，文本在另一台设备上跳来跳去。这意味着我只是在兜圈子。

有没有一种方法可以让我在所有移动设备上说边距应该是 fx:从左边算起 20px，或者你们是怎么做到的？

HTML

<div class="max-container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    @CurrentPage.GetGridHtml("Grid")
                </div>
            </div>
        </div>

CSS

.header-text h1 {
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    padding-top: 160px;
}




.header-text h2 {
    font-size: 20px !important;
    margin-bottom: 25px;
    font-weight: 900;
    color: #fff;

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .header-text h2 {
    font-size: 20px !important;
    margin-left: 20px;
    font-weight: 900;

}

Answer 1

试试这个:

/* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        .header-text h2, .header-text h1 {
            margin-left: 20px;
        }
    }

如果其他值保持不变，则无需重复所有其他值 — 您还会注意到您可以将选择器组合在一起，这使您的代码更轻便。

另外，在使用 !important 时要小心(它会使以后的编码变得非常困惑)。在使用之前尝试添加特异性。