堆棧內存溢出
  簡體   English   中英

調整不同屏幕尺寸的內容？

[英]Resizing content with different screen sizes?

 原文  2016-05-28 03:42:18  4   2    html/ css/ twitter-bootstrap

問題描述

我正在嘗試制作一個單頁網站。 我為每個部分都有一個不同的容器，高度為 100vh，因此容器會針對不同的屏幕調整大小，但內容不會使網站在小屏幕上出錯。 如何使內容與容器一起調整大小。

2 個解決方案

解決方案1
 0  2016-05-28 03:53:36

也許這可以幫助

<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

解決方案2
 0  2016-05-28 03:54:04

你可以做最簡單的事情就是去一個HTML5響應的框架，如引導或使用CSS媒體查詢，如顯示在這里（或請參閱下面的簡單的例子）。 除此之外，它可能會涉及與上述兩種方式類似的最終結果的 javascript。

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在不同屏幕尺寸上調整文本大小的最佳做法 html 內容不適應不同的屏幕尺寸 響應式 canvas 內容以適應不同的屏幕尺寸 截面元素是否無法將尺寸/保持格式調整為不同的屏幕尺寸？ 調整徽標大小，然后選擇 內容在Bootstrap中無法在不同的屏幕尺寸上運行 是否需要在 html、js 和 css 中添加約束以調整到不同的屏幕尺寸 頂部導航菜單下拉菜單隱藏在網頁內容下方，我想固定不同屏幕尺寸上的內容位置 拉伸圖像以適應不同的屏幕尺寸 使文字適合不同的屏幕尺寸
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM