元素在1200px内对齐

Question

当前我在此网站上拥有以下页面，该页面在我的屏幕上看起来确实是不错的屏幕快照＃1，但是然后出现了问题，当调整屏幕大小并测试较大显示器的响应速度时，屏幕截图＃2

如何使本节保持不同的屏幕尺寸？这样文本就不会移动太远？

谢谢你们！

Answer 1

在您的主要内容容器样式上，添加max-width: 1200px;。如果还没有，请将margin: 0 auto;居中。

Answer 2

使用CSS媒体查询作为实例

@media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
        body{
          background: red;
        }
    }

或者，如果您愿意，可以使用

@media only screen and (max-width: 600px) {
/* styles for browsers smaller than 960px; */
 /* write your css here*/
}`enter code here`