Question

在我的标题中，我添加了一个显示文本的区域。问题是文本在较小的设备上不会变小，因此并非所有文本都显示在其框中。我想把文字放在盒子里（变得更小，所以一切都进入盒子）

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

问题出现在那里：Problem

我尝试使用自定义宽度的媒体对其进行修改，但我无法找到解决方法...

Answer 1

好吧，我的第一个想法不是调整字体大小，我会从不同的角度处理这个缺陷：删除min-width: 330px;上的header #top-info #online，文本会自然地流向第二行。您可以根据需要对齐它。

或者，添加类似

的内容

@media only screen and (max-width: 374px) {
    header #top-info #online p {
        font-size: 14px;
    }
}

到你的风格结束。

Answer 2

在所有文字上使用字体大小100％，如果没有，它会根据文字大小做出响应，你可以用这样的css媒体查询调整字体大小

 <style>
         @media screen and (max-width: 820px) {
         header #top-info #online p{
         font-size:14px; //edit this font size to fit your taste and also just copy and paste and use the sample format to tweak other codes. IF you want to add more css text to reduce size add in the media query
         }
    .container{
        width:100%;
        margin:auto;
        overflow:hidden;
    }
header #top-info #online{
    background-color:#558B2F;
    float:left;
    min-height:50px;
}
     }
 </style>

移动设备上的文字不会变小

2 个答案: