在不同分辨率下显示不同的效果。 当屏幕宽度大于1000像素的时候，显示为三栏。 当屏幕宽度小于1000像素，大于768像素时，隐藏右侧边栏。 当屏幕宽度小于768像素，纵向排列三栏。
<!--页面主体--> <div class="container"> <!--导航菜单--> <nav> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </nav> <!--页面主体内容--> <main> <div class="block1">block1</div> <div class="block2">block2</div> </main> <!--侧边栏--> <aside> <div class="side1">side1</div> <div class="side2">side2</div> </aside> </div> <!--页面底部--> <footer> copyright C fhasfhajlkdjak </footer> <style type="text/css"> html, body { width: 100%; height: 100%; } body { display: flex; flex-direction: column; } .container { flex: 1; display: flex; background: #d00; } nav, aside { width: 200px; background: pink; } main { flex: 1; } footer { height: 60px; background: #ccc; } @media only screen and (max-width:768px) { .container { flex-direction: column; } nav, aside { width: 100%; } aside { display: block; } main { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1000px) { aside { display: none; } } </style>