css3 页面自适应

CSS3 具备了许多更为强大的页面布局方案，其中最为重要的就是页面自适应。通俗来讲，就是页面可以根据浏览器的大小调整页面布局，使得在各种设备上都有良好的呈现效果。

/* 基础设置 */html,body {
    height:100%;
    width:100%;
}
/* 自适应布局 */@media screen and (min-width: 768px) {
/* 小于等于 768px 时不生效 */}
@media screen and (min-width: 992px) {
/* 大于 768px 且小于等于 992px 时生效 */}
@media screen and (min-width: 1200px) {
/* 大于 992px 且小于等于 1200px 时生效 */}
@media screen and (min-width: 1600px) {
/* 大于 1200px 时生效 */}
    

通过上面的代码，我们可以设置针对不同宽度的设备适应不同的CSS样式，产生不同的页面布局效果。如在小屏幕的设备上，我们可以将导航栏隐藏或折叠，以便更好的展示内容；在较大屏幕的设备中，可以使用两栏或三栏等更加宽敞的布局展示内容。同时，CSS3 还提供了更多的自适应实现方案，如 rem、vw、vh 和媒体查询等，这些技术可以让我们更灵活、更高效地实现页面自适应。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！