css3动态百分比 |css hack ie浏览器

/* 普通百分比 */
div {
width: 50%;
height: 50%;
}
/* 动态百分比 */
div {
width: calc(100% - 20px);
height: calc(100% - 20px);
}

这个例子中，大家可以看到使用普通百分比时，它的大小是根据其父元素的大小来计算的。但是在特定屏幕上，比如说横屏的屏幕，这种百分比可能会产生一些奇怪的效果，因此大家需要使用动态百分比。它是使用calc()函数来计算子元素的宽度和高度，其中20px是大家留给边框和内边距的空间。

除了calc()函数，CSS3还支持另外两个函数来计算动态百分比，它们分别是min()和max()。

/* min()函数 */
div {
width: min(100%, 500px);
height: min(100%, 500px);
}
/* max()函数 */
div {
width: max(100%, 500px);
height: max(100%, 500px);
}

min()函数会根据最小值来计算宽度和高度，因此在某些情况下，它可能会让元素变得很小。相反，max()函数会根据最大值来计算元素的大小，因此在某些情况下，它可能会让元素变得很大。

总的来说，动态百分比是一个非常重要的CSS3功能，它可以帮助大家在不同的屏幕上构建出更加可靠和稳定的布局。通过使用calc()、min()或max()函数，大家可以轻松地适应不同大小的屏幕，从而获得更好的用户体验。