html自适应布局_流式布局(百分比布局)

流式布局

布局特征:

高度写死，宽度自适应。并不是百分百还原设计图

比如：设计图是针对320px屏幕设计的，那么只有在320设备的屏幕中，才是完美的效果，其他情况都会拉伸

小图片、小图标、文字大小一般写死

大图片一般宽度自适应，高度等比例缩放(例如:轮播图)

经典的流式布局：

左侧固定，右侧自适应

方法有很多种,简单例举3种。

一、左侧固定右侧自适应-定位

步骤:

1、左侧宽度写死——》定位——》给父元素设置左padding即可

2、右侧宽度不用设置(自适应)