网页的5种布局，你掌握了吗?

　　网页的5种布局，你掌握了吗?

　　一、静态布局

　　设计：

　　布局元素居中布局，设置width固定宽度。

　　二、流式布局

　　设计：

　　布局元素宽度使用百分比并使用min-width或max-width限制，高度使用vw并使用min-height或max-height限制使布局元素长宽比一致。

　　内容元素使用百分比。

　　使整体布局一致。流式布局代表：栅格系统。

　　三、自适应布局

　　设计：

　　使用媒体查询在不同断点适用不同静态布局。

　　四、响应式布局

　　设计：

　　自适应和流式布局的结合，响应式布局的代表：bootstrap。

　　五、弹性布局和rem/em布局

　　设计：

　　弹性布局使用flex。

　　rem/em布局使用rem调整各元素尺寸和文字大小，以上以750的设计稿，1rem = 100px，适用于移动端的页面。