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

Question

我的网站使用此代码width，它在15.6英寸的屏幕上完美展示，但适用于移动屏幕和上网本＆amp; 10英寸的平板电脑屏幕，网站完全搞砸了。它使用固定宽度，我试图使它auto，100px但没有成功。这是css代码：

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

网站为HERE 有一个背景图像，容器放在它上面。如何修改此代码以使其具有不同屏幕的自动宽度？

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;
}