不同的屏幕宽度的不同布局

Question

我正在开发一个网页，我希望在文本转移到其他所有内容时使用JavaScript来集中一些文本（包含在＆＃34; p＆＃34;以及display：inline-block属性中）在一个较小的窗口）。当窗口大小足够大时，我在屏幕右侧显示文本（我想要更大的窗口）。

基本上，我在屏幕左侧和右侧有更大窗口的内容，但我希望当浏览器较小时，该内容会变为居中和垂直。

我尝试过使用.addEventListener（），但我的JavaScript知识非常有限。

有什么想法？这有意义吗？

Answer 1

我看到你正在尝试做某种响应式设计。没有任何JavaScript，你最好不要这样做。

您应该查看Css Media Queries，这意味着根据屏幕尺寸设置特定的CSS样式：

@media screen and (max-width: 500px) {   

与您的方案类似，这里有一个展示概念的示例：http://jsfiddle.net/xkJ3G/
调整窗口大小并进行测试！

Answer 2

只使用HTML和CSS即可达到预期的效果。

JSFiddle

HTML

<div class="outer">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

CSS

div.outer {
    width: 100%;
    text-align: center;
}

div.A, 
div.B {
    width: 40%;
    min-width: 250px;
    display: inline-block;
}

当宽度小于最小宽度时（在此示例中，当40％<250px时），换行符将是