对于不同的尺寸，我应该只以像素为单位给出最小高度和最大高度吗?

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%; 

有关更多信息，请参阅此处，

简单文档

Answer 2

你的同事建议像素的原因是，尽管指定百分比大小会使事情缩放和响应式布局是一个很好的理论，但这在实践中效果不佳，因为结果是不可预测的。使用像素大小时，您可以更好地控制，现代框架旨在将容器维护为固定大小。使用的主要技术是，当容器无法水平放置在屏幕上时，将容器基本上排成"行"(并在某些情况下显示和隐藏不同的容器(。

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

将Twitter引导程序视为一个框架(尤其是网格系统 https://v4-alpha.getbootstrap.com/layout/grid/(。

另请查看flexbox(一种CSS技术(。这里有一个有趣的学习方式—— http://flexboxfroggy.com/