Web布局实践

静态布局

传统web设计，以px作为单位

常见于pc端

设计方法：（居中布局）

新建移动端页面（新的域名）

优点：简单，没有兼容性问题

缺点：不能兼容不同屏幕

流式布局

元素宽度按屏幕的分辨率做适配

代表：栅栏系统（网络原理）

特点：元素大小变化，布局不变

设计方法：（通过百分比定义）使用%定义宽度，高度使用px，配合min-*/max-*配置

优点：根据不同分辨率做出布局

缺点：如果跨度过大会不协调

自适应布局

为不同屏幕定义分辨率，创建多个静态布局

特点：分辨率变化时，页面元素位置会变化，但大小不会改变

使用@media媒体查询给不同尺寸介质设备切换不同样式

响应式布局

流式布局加自适应

特点：通过媒介查询来设置样式 Media Queries

设置多种试图宽度

设计方法：1. 宽度需要使用百分比

优点：在分辨率不同，设备环境进行一些不同的设计，对于小企业而言，所有开发维护和运营上，相对多个版本成本会降低很多

兼容性好，跨平台，移动设备尺寸参差不齐，版本定制通常只适用于固定规格的设备，但不适用分辨率变化较大的设备，响应式布局能够较好的解决这个问题。

缺点 ：移动端和PC端页面加载的内容是一样的，代码多了，会出现隐藏无用的元素，加载时间加长导致文件增大，影响加载速度，流量消耗也相对比较大。

局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

弹性布局

提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

特点：

设计方法： 1.需要父节点设置display:flex

优点在于其容易上手，根据flex规则很容易达到某个布局效果。

缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。