Question

我有一个容器，我在里面写文字;代码如下：

 #webdd {
    overflow: scroll;
    width: 100%;
    max-width: 100%;
    max-height: 50%;
    margin-top: 30%;
    word-wrap: break-word;
    text-align: center;
    display: block;
}

#headerw {
    font-size: 16px;
    opacity: 0.9;
    font-family: globerb;
    font-weight: bold;
    margin-bottom: 0px;
    color: #333;
    z-index: 9;
}

#descw {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 13px;
    opacity: 0.6;
    font-family: globerb;
    font-weight: normal;
    margin-top: 0px;
    color: #333;
    text-shadow: none;
    text-align: justify;
    z-index: 9;
}

问题是该页面专门用于手机，当有人身高较小时，文字会进入滚动状态（不会出现在手机上），我想要的东西可以使文字更小，或者...换行它以某种方式。 #webdd是我的主容器，其他headerw是标题，descw是描述。

有什么想法吗？

Answer 1

使用media queries将根据容器的高度更改文本的大小。

  @media screen and (max-width: 995px) , screen and (max-height: 700px) {
      font-size:1.25em;
  }

您要支持的屏幕尺寸的其他此类组合。

将文本包装在容器内

1 个答案: