Question

下面是我的CSS，我试图让它在移动设备上显示为2行。现在它显示一个长句，需要在移动设备上滚动才能阅读。

<!-- promo banner -->
.site-tools-bar {
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.17);
    height: 42px;
    min-width: 1015px;
}


.site-tools-bar .site-tools-wrapper {
    width: 1015px;
    margin: 0px auto;
    padding: 12px 0px;
    text-align: center;
    position: relative;
}

.site-tools-bar a.header-promo {
    font-family: "Montserrat",sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    float: center;
}

.site-tools-bar a.header-promo .promo-code {
    color: #ff0000;
}

Answer 1

这里有一个非常基本解决方案，只是为了让您入门（只有两种屏幕尺寸） - 您可以明白：只需创建任意数量的尺寸并声明元素宽度（以及每个特定于屏幕的功能。元素内的所有内容都应按比例缩放。

    .site-tools-bar {
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.17);
        height: 42px;
        margin: 0px auto;
        text-align: center;
        position: relative;
    }
    @media screen and (min-width: 321px) {
      .site-tools-bar {
      width:1015px;
      }
    }
    @media screen and (max-width: 320px) {
      .site-tools-bar {
      width:320px;
      }
    }
    .site-tools-wrapper {
        width: calc(100% - 24px);
        margin: 0px auto;
        padding: 12px 0px;
        text-align: center;
        position: relative;
    }

    .site-tools-bar a.header-promo {
        font-family: "Montserrat",sans-serif;
        text-transform: uppercase;
        font-size: 15px;
        float: center;
    }

    .site-tools-bar a.header-promo .promo-code {
        color: #ff0000;
    }

@media CSS Help - 调整文本以显示响应式移动设备

1 个答案: