Question

我有CSS的问题，当我调整屏幕大小时，它没有崩溃，任何想法为什么？这假设位于屏幕的中心，我希望它保持在中心，但在屏幕分辨率改变时调整大小

这是我的代码：

        <div style="position:relative; width:900px; margin:auto; text-align:center; font-size:25px;">
                <div style="margin-top:70px;"> 
                    <p style="line-height:1">some textttttttttt</p>
                    <p style="line-height:1">Another texthghghghgh </p>
                    <p style="margin-top:30px">different stuff here :</p>
                    <h2 style="color:#EE3969; font-size:45px"> first</h2>
                    <h2 style="color:#DE9540; font-size:45px"> second</h2>
                    <h2 style="color:#00AAC2; font-size:45px"> third</h2>

                </div>

            </div>

由于

Answer 1

用此

替换代码的第一行

<div style="position: relative; width: 100%; margin:auto; text-align: center; font-size: 25px;">

Answer 2

要更改布局，您可以使用JavaScript，或者如果您想要CSS答案，可以使用CSS3的媒体查询。

使用它们可以根据客户端的机器属性（例如屏幕尺寸等）更改元素的样式。

@media only screen and (max-width: 500px) {
  /* properties for a screen with size 500px */
}

这样，一旦调整了div，就可以改变div的CSS属性。

请注意，您使用的是硬编码的900px值。无论您通过调整浏览器大小设置屏幕的大小，都会迫使浏览器将其设置为900px。为此，您可以使用CSS3的媒体查询。屏幕尺寸变短时更改文档的布局。

这样，您可以为不同的屏幕尺寸设置多种样式，而不必担心每种样式并为它们创建单一样式。

CSS在较小的屏幕上调整DIV大小

2 个答案: