Question

以下是示例

<div id="parentContainer" style="height:100%;width:100%">
<div id="childContainer" style="height:98%";width:100%>
<div id="list" style="min-height:20%;max-height:90%;color:red;">
Hello, this contains the web page content
</div>
</div>
</div>

问题是，我的一位同事说像边缘，最小高度和最大高度这样的事情必须以像素为单位给出响应式设计，以确保布局不会因各种问题而变得混乱屏幕尺寸和浏览器，但我的决定是，对于适合各种屏幕尺寸的布局，给出css值百分比是正确的方法，因为如果屏幕的分辨率较低，但是对于更高分辨率的屏幕，20px可能看起来更大，它将看起来不像在低分辨率屏幕上看到的那样。如果我错了，因为我正在寻找合适的方法，请纠正我。

Answer 1

您可以使用min|max-width和min|max-height中的百分比。

像这样，

min-height: 100% !important; /* browser fill */
max-height: 100%; 
min-width: 100%; 
max-width: 100%;

了解更多信息，请参阅

simple docs

Answer 2

你的同事建议像素的原因在于，尽管指定百分比大小会使事物变得规模化并且响应性地布局，但这在实践中并不好用，因为结果是不可预测的。使用像素大小时，您可以更好地控制，而现代框架旨在将容器维持在固定大小。使用的主要技术是将容器基本上流入＆＃39;行。当容器不能水平放在屏幕上时（并在某些情况下显示和隐藏不同的容器）。

最小高度和最大高度确实可以确保任何特定容器的尺寸是可预测的，这可能有多种原因（特别是为了确保元素在缩放时不会变得太大或太小），可能构成响应式设计策略的一部分。

将Twitter bootstrap视为一个框架（尤其是网格系统https://v4-alpha.getbootstrap.com/layout/grid/）。

另请参阅flexbox（一种CSS技术）。这是学习它的有趣方式 - http://flexboxfroggy.com/

我应该给出不同尺寸的最小高度和最大高度吗？

2 个答案: