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

【问题标题】：How to set auto width for different screen sizes?如何为不同的屏幕尺寸设置自动宽度？
【发布时间】：2014-05-08 13:54:12
【问题描述】：

我的网站使用此代码为width，它在 15.6 英寸的屏幕上完美显示，但对于 10 英寸的手机屏幕和上网本和平板电脑屏幕，网站完全一团糟。它使用固定宽度，我尝试使其成为auto、100px，但没有成功。这是css代码：

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

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

PS：脚本是opencart。

【问题讨论】：

Media queries 或使用百分比。
您可能会使用width: 90% 而不是px，但您的网站可能仍然看起来一团糟，因为内部元素/容器可能使用固定宽度。因此，要真正让您的网站在小屏幕上运行，您必须消除固定的宽度/高度，并使用媒体查询调整您的网站以在不同的屏幕尺寸上适当地显示，正如@Ruddy 所提到的。

标签： css width

【解决方案1】：

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

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

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

【讨论】：

感谢您的回答。但是，我忘了提到这一点，有一个背景图像。我尝试了这些，但随后容器覆盖了整个图像。我想修改它，因为图像不会被修改。应该是这样的：link
code body { background: #3B3A42 url("../image/pattern15.png"); color: #000000; font-family: 'Roboto Condensed', sans-serif; margin: 0px; padding: 0px; } /* layout */ .wrapper{ padding: 0 20px; } #container { width: 1180px; margin: 50px auto; text-align: left; background-color:#FFF; }

【解决方案2】：

在css下面试试这个..（所有宽度都适用于max-with:100%）

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

【讨论】：