前端常见的布局知识总结

静态布局**（Static Layout）**

1. 使用：常见的px布局，网页大小不随屏幕大小而改变，为了防止布局混乱，可以设置min-width ，常用于pc端
2. 优点：对于设计和开发相对容易，不需要考虑兼容性问题
3. 缺点：只能适用于特定尺寸的屏幕，不能根据屏幕大小改变网页表现

流式布局**（Liquid Layout）**

网页元素的大小根据设备分辨率的大小进行适配调整，但是整体布局不变，常见的网格布局和栅格布局，比如sm md xs等等

1. 使用：网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）
2. 优点：屏幕分辨率变化时，网页元素大小发生改变但是布局不变
3. 缺点：屏幕分辨率过大或过小时，容易导致网页元素无法正常显示

自适应布局**（Adaptive Layout）**

为不同的屏幕分辨率定义不同的静态布局，即定义多套布局方案

1. 使用：根据media查询控制，切换到不同屏幕时，采用对应的布局
2. 特点：屏幕分辨率改变时，网页元素不会随屏幕大小改变而改变，但网页元素的位置会变化
3. 缺点：需要设计多个屏幕范围，可能无法兼容所有情况

响应式布局（Responsive Layout）

流式布局+媒体查询+弹性布局

弹性布局**（rem/em布局）**

em/rem+js布局

1. 特点：对于市场上常见的屏幕尺寸做不同的尺寸设计，即定义一个基础的css文件，如下：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

1. 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应
2. 缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计

结论

1. 只做pc端，静态布局
2. 只做移动端，rem+js布局，即弹性布局
3. pc，需要兼容移动，响应式布局