css - 如何在任何分辨率的 CSS 中适应网站的内容

Question

我在这里有我的 login.css：

#contentContainer{

margin-top: 10%;

}

这是我的PHP文件的一部分：

  <div align="center" id="contentContainer">
        <div id="Login_Cont"></div>
        <div class="login_logo"></div>

  </div>

我将网站的内容放在一个大 div 中，我称之为 contentContainer。现在，我怎样才能以任何分辨率适应我的网站内容，我已经尝试过媒体屏幕技巧/css 技巧，但它不起作用。请帮我。

Answer 1

所以你想让 contentContainer 漂浮在屏幕中间吗？

你追求的是这样的吗：

#contentContainer {
background-color: #ccc;
height: 300px;
left: 50%;
margin-left: -150px;
margin-top: -150px;
position:absolute;
top: 50%;
width: 300px;
}

Answer 2

您可以按百分比给出该容器宽度，例如

#contentContainer{
   width:100%;//likewise
   margin:auto;//to center your div
}

或最好使用媒体查询

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

}//likewise define for each screen resolution