防止HTML元素在分辨率太小时变扁 [英] prevent html elements from squishing when resolution too small

问题描述

当您缩小网页浏览器的宽度时，我会看到像亚马逊和谷歌这样的网站，这些元素只会挤压到某一点，然后即使缩小宽度也会停止挤压。

什么样的技术可以允许这样做？是否有一个特定的CSS属性可以启用这个功能？

解决方案

您可能会看到 min-宽度和最小高度动作样式。

例如：

  .myclass {
 width：50％; 
 min-width：100px; 
} 
  

...将占用容器对象的50％，所以可以但不会小于100px宽。

min-height 的工作方式大致相同。 / p>

请注意，如果您需要支持IE6，此浏览器不支持 min-height 或最小宽度。 （有这方面的解决方法，但最好的解决方案是不支持IE6）

I see websites like Amazon and Google when you shrink the width of the web browser the elements only squish to a certain point and then it stops squishing even if you shrink the width even more.

What kind of techniques would allow this? Is there a specific CSS attribute that can enable this?

解决方案

You're probably seeing the min-width and min-height styles in action.

eg:

.myclass {
    width: 50%;
    min-width:100px;
}

...will take up 50% of the container object, so can be resized, but will never get smaller than 100px wide.

min-height works in much the same way.

Note that if you need to support IE6, this browser doesn't support min-height or min-width. (there are work-arounds for this, but the best solution is not to support IE6)

这篇关于防止HTML元素在分辨率太小时变扁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！