移动端常见布局方式

移动端常见布局方式

一、流动布局

流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。除此之外，流动布局使用浮动，float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

二、媒体查询和rem

通过查询当前浏览器宽度来设置根元素的font-size，而rem单位就是与根元素的font-size的大小成比例。

三、flex布局

Flexbox是CSS3引入的新的布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。