流体布局是指网页的布局会随着浏览器窗口大小的变化而自动调整,从而实现页面在不同设备上的适应性。CSS中,流体布局通常通过百分比、em、rem等相对单位来实现,从而将网页中各元素的尺寸和位置与浏览器窗口
流体布局是指网页的布局会随着浏览器窗口大小的变化而自动调整,从而实现页面在不同设备上的适应性。CSS中,流体布局通常通过百分比、em、rem等相对单位来实现,从而将网页中各元素的尺寸和位置与浏览器窗口大小相对应。
/*使用百分比实现流体布局*/ .container{ width: 90%; /*容器宽度为浏览器窗口宽度的90%*/ margin: 0 auto; /*居中显示*/ } .box{ width: 30%; /*盒子宽度为容器宽度的30%*/ height: 50px; float: left; margin-right: 5%; /*右侧间距为盒子宽度的5%*/ } /*使用em实现流体布局*/ body{ font-size: 16px; /*设置body基础字体大小*/ } .box1{ width: 10em; /*盒子宽度为body字体大小的10倍*/ height: 3em; } .box2{ width: 20em; /*盒子宽度为body字体大小的20倍*/ height: 6em; } /*使用rem实现流体布局*/ html{ font-size: 16px; /*设置html基础字体大小*/ } .box3{ width: 20rem; /*盒子宽度为html字体大小的20倍*/ height: 5rem; } .box4{ width: 30rem; /*盒子宽度为html字体大小的30倍*/ height: 7.5rem; }
通过使用流体布局,可以使网页在不同的屏幕尺寸和分辨率下具有良好的显示效果,适应不同的设备和用户需求,提升网页的用户体验和可访问性。
粉丝
0
关注
0
收藏
0