Question

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

有没有办法我可以在所有移动设备上说左边的边距应该是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 （它可能会使将来的编码变得非常混乱）。在使用之前尝试添加特异性。

媒体查询和文字

1 个答案: