javascript - 制作适用于多种分辨率的 2 列布局的最佳方法？

Question

我已经问过几次了，但好像我说的不太对，所以我会尝试在这里做得更好，

我正在尝试在 HTML、CSS 和 Java 中制作一个 2 列布局，我想要的是一旦分辨率太低，左边的文本就会居中在两列的中间(我的意思是列在 1920x 宽度和 1600x 宽度下看起来很棒，但当它下降到 1200x800 时，文本会超过右图的高度)。

我见过一个网站，一旦页面宽度达到某个点(大约 1200 倍宽度)，左栏中的文本就会对齐到两者的中间，这使得页面在所有分辨率下看起来都很好。我有一种感觉，文本被一个 java 片段覆盖在两列的顶部，告诉文本以一定的宽度移动到中心，唯一的问题是我不知道如何实现这一点，

我在底部附上了我的代码，但在我的版本中，文本在左栏内，我认为文本可能在两栏的顶部是正确的吗？是否有 javascript 告诉文本以一定宽度移动中心？非常感谢任何帮助!

HTML:

<div class="content1">
<div class="column1 animation fadeInUp">
<div class="title1">
<h3>STATEMENT</h3> . 
<h2>Title of Some Sort.</h2>
<div class="blue-line"></div>
</div>
<p1>Paragraph text.<br></p1>
<button class="svg1">FORUM</button>
<button class="svg2">SIGN UP</button>
</div>
<div class="column2">
<div class="column2pic"></div>
</div>
</div>

CSS:

.content1 {
display: flex;
margin-left:100px;
margin-right:0px;
}

.column1 {
display:inline-block;
flex: 31%;
padding-bottom: 0px;
padding-right:50px;
opacity: 0; animation-play-state: paused;
}

.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-play-state: running;
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}


@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2.5rem, 0);
transform: translate3d(0, 2.5rem, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}

.column2 {
flex: 50%;
padding-bottom: 0px;
padding-left:100px;
padding-top:0px;
width:50vw;
}

.column2pic {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 
0.0)), url(../Assets/Images/Content1pic);
background-size:cover;
z-index: 100;
width:50vw;
height:600px;
}

注意:动画只是左侧文本淡出的简单效果，但如果有人为了保持简单而排除了该部分，请不要介意。

如果您有任何想法，请告诉我!谢谢!

Answer 1

您将需要使用 css @media。在您的情况下，您将必须创建 @media only screen and (max-width: 1200px) 使用您想要的样式。请参阅下面的示例。我将宽度设置为 400px 以适合此代码段。当您在 400px @media only screen and (max-width: 400px) 下调整浏览器窗口大小时，它会降低文本大小 font-size: 20px; 并将其对齐中心 text-align: center;.

#mypic {
  width: 100%;
  max-width: 560px;
  height: 350px;
  background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350");
  font-size: 50px;
}

@media only screen and (max-width: 400px) {
    #mypic {
      font-size: 20px;
      text-align: center;
    }
}

<div id="mypic">My Title In Picture!</div>