如何爲不同的屏幕尺寸設置自動寬度？

我的網站使用此代碼作爲width，它的顯示效果在一塊15.6英寸的屏幕上完美顯示，但對於10英寸的手機屏幕和上網本&平板電腦屏幕，網站完全搞砸了。它使用固定的寬度，我試圖使它auto,100px但沒有成功。這裏是CSS代碼：如何爲不同的屏幕尺寸設置自動寬度？

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

網站是HERE 有一個背景圖像和容器置於其上。如何修改此代碼以使不同屏幕具有自動寬度？ PS：腳本是opencart。

來源

2014-05-08 user3616727

[媒體查詢（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）或使用百分比。 – Ruddy

你可以使用'width：90％'而不是'px'，但是你的網站可能看起來很亂，因爲內部元素/容器可能使用固定寬度。因此，爲了讓您的網站在小屏幕上運行，您必須消除固定的寬度/高度，並根據@Ruddy的說法，使用媒體查詢在不同的屏幕尺寸上適當地顯示網站。 – Ejaz

嘗試在CSS中使用百分比而不是固定寬度。

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

如果你想使用它取決於正在上查看設備上的不同的CSS，你最好的選擇是使用由Media Queries @Ruddy

來源

2014-05-08 13:58:51 ovaltein

謝謝你的答案。但是，我忘了提到這一點，有一個背景圖像。我嘗試過，但容器覆蓋整個圖像。我想修改它，因爲圖像不會被修改。這裏是它應該如何：[鏈接]（http://www.elemonya.com/question.png） – user3616727

'代碼 body { background：＃3B3A42 url（「../ image/pattern15.png」）; color：＃000000; font-family：'Roboto Condensed'，sans-serif; margin：0px; padding：0px; } /* layout */ .wrapper { padding：0 20px; } ＃容器{ 寬度：1180px; margin：50px auto; text-align：left; background-color：#FFF; }' – user3616727

試試這個下面的CSS的建議。（對所有寬度適用於MAX-有：100％）

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

來源

2014-05-08 13:59:36

如何爲不同的屏幕尺寸設置自動寬度？

回答

相關問題