CSS的自适应布局是Web端开发所必须了解的知识点之一,常用的实现方式是通过对元素的样式属性进行赋值来达到自适应的效果。
/* 以屏幕宽度为参考,设置根元素字体大小 */ html { font-size: calc(100vw / 1920 * 16); /*vw表示视口宽度的百分比*/ } /* 设置body字体大小和最小高度 */ body { font-size: 1rem; min-height: 100vh; } /* 设置容器宽度和最小高度 */ .container { width: 90%; min-height: calc(100vh - 120px); margin: 60px auto 0; /*使用auto参数来使容器水平居中*/ }
上面的代码示例中,通过设置根元素的字体大小使用了视口宽度的百分比来达到自适应屏幕的效果,同时通过设置容器的宽度和最小高度来保证元素的比例在不同设备上都可以正常展现。
CSS的自适应布局是动态的,可以根据不同的设备尺寸来自动调整布局,为用户提供更好的浏览体验。