1. 固定大小的框:
.fixed-size-box {
width: 200px;
height: 150px;
}
2. 百分比大小的框:
.percentage-size-box {
width: 50%;
height: 75%;
}
3. 最大和最小宽度/高度:
.min-max-box {
min-width: 100px;
max-width: 300px;
min-height: 50px;
max-height: 200px;
}
4. 视口单位大小:
.viewport-size-box {
width: 50vw; /* 视口宽度的50% */
height: 30vh; /* 视口高度的30% */
}
5. 响应式大小:
.responsive-box {
width: 100%;
height: auto; /* 保持宽高比例 */
}
上述示例中,你可以根据具体需求选择使用不同的方式来设置框大小。在设计响应式界面时,百分比大小和视口单位常常是有用的选择。
转载请注明出处:http://www.zyzy.cn/article/detail/4072/CSS