使用不同的屏幕尺寸調整內容大小？

-1

我正在嘗試製作單頁網站。我有一個不同的容器，每個部分的高度爲100vh，因此容器調整爲不同的屏幕，但內容不會使網站在小屏幕上全部出錯。如何使容器的內容重新調整大小。使用不同的屏幕尺寸調整內容大小？

2016-05-28 stt_code

你有什麼內容？也許你應該提供一個例子。 – darrylyeo

你能提供一些示例代碼嗎？當容器變小時，你如何預期內容的大小？你期望它被剪輯，然後滾動（例如「溢出」）;你是否期望它的規模縮小;你是否期望它改變佈局;等等。？ –

我會建議使用響應式框架，如Bootstrap CSS或類似的東西 –

也許這可以幫助

<HTML> 
    <HEAD> 
    <style> 
    .resizer{ 
     min-width:700px; 
     margin-left:10px; 
     overflow:hidden; 
     } 
    </style> 
    </HEAD> 
    <BODY> 
    <div class='resizer'> 
     YOUR CONTENT goes here 
    </div> 
</BODY> 
</HTML>

您可能也想看看CSS: Auto resize div to fit container width

來源

2016-05-28 03:53:36

你可以做的是去一個HTML5響應的框架，如Bootstrap或使用CSS媒體查詢的最簡單的東西一樣所示here（或查看下面的快速示例）。除此之外，它可能會涉及到與上述兩種方式類似的最終結果的JavaScript。

@media screen and (min-width: 480px) { 
body { 
    background-color: lightgreen; 
    } 
}

來源

2016-05-28 03:54:04 f78xd23

使用不同的屏幕尺寸調整內容大小？

回答

相關問題