html - 移动设备上的文本未环绕在 div 内

Question

我在 div 标签内有一段文本，在桌面上看起来很棒，但是当您缩小移动设备页面并且 div 堆叠时，文本不会换行，只是从侧面拖尾。我对此不太有经验，但我真的很想学习如何解决这个问题。

我的 div CSS

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

页面上我的 HTML

<div id="homemain">
[rev_slider home_small]
&nbsp;
<h2>[title size="2"]Explore Our Services[/title]</h2>
Text text text, texty text, lots and lots of stuff about our services and what we do. We really want you to use our services and what not. We're the best.
</div>

顺便说一句，这是 WordPress 中的一个页面，如果这在这里有很大的不同的话。我没有创建该页面，只是继承了它并负责修复它，因为我是办公室里最“技术”的人。幸运的我!对此的任何帮助都会有所帮助。

Answer 1

问题是您想要响应式布局，但您正在使用非响应式方法。请记住，为了获得响应式布局，您需要根据非固定大小(%、rem 等)来考虑它

所以，在你的代码中，你有这个:

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

您应该将其更改为:

#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
max-width: 100%;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}

但是，如果您需要在桌面上有 600px 宽度，那么您可以使用:

@media handheld, only screen and (min-width: 767px) {
    #homemain {
    line-height: 15px;
    background-color: transparent;
    height: 500px;
    width:600px;
    max-width: 600px;
    float: left;
    padding: 10px;
    font-size: 100%;
    margin: 10px;
    word-wrap: break-word;
    }
}

对于较小的屏幕:

@media handheld, only screen and (max-width: 767px) {
    #homemain {
    line-height: 15px;
    background-color: transparent;
    height: 500px;
    width:600px;
    max-width: 320px; /* or whatever size you want */
    float: left;
    padding: 10px;
    font-size: 100%;
    margin: 10px;
    word-wrap: break-word;
    }
}

这样，通过使用 media types ，您可以更好地控制不同尺寸的布局