如何设置不同屏幕尺寸的自动宽度？

Question

我的网站使用此代码进行

width

，它在15.6英寸屏幕上完美显示，但对于10英寸的手机屏幕和上网本和平板电脑屏幕，网站完全混乱。它使用固定宽度，我尝试使其

auto

，

100px

但没有成功。这是CSS代码：

#container {
    width: 1180px;
    margin: 5px auto;
    text-align: left;
    background-color:#FFF;
}

网站是这里 有一个背景图像，容器放置在它上面。如何修改此代码以针对不同屏幕自动调整宽度？

PS：脚本是opencart。

Answer 1

尝试在 CSS 中使用百分比而不是固定宽度。

#container 
{
width: 95%; 
margin: 5px auto;
text-align: left;
background-color:#FFF;
}

如果您想根据正在查看的设备使用不同的CSS，最好的选择是使用@Ruddy建议的Media Queries

Answer 2

尝试下面的CSS..（所有宽度都适用于 max-with:100% ）

#container {
width: 1180px;
max-width: 100%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}

Answer 3

-> 尝试在 CSS 中使用百分比或最小宽度和最大宽度，而不是固定宽度。

------百分比------

 #container {
  width: 95%;
  margin: 5px auto;
  text-align: left;
  background-color: #fff;
}

最小宽度和最大宽度

#container {
  width: 100%;
  max-width: 1180px;
  min-width: 380px;
  margin: 5px auto;
  text-align: left;
  background-color: #fff;
}

尝试使用这两种方法。如果这些不起作用，则使用媒体查询。