使用不同的屏幕尺寸调整内容大小？

-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

使用不同的屏幕尺寸调整内容大小？

回答

相关问题