前端常见布局，（pc端和移动端）

固定布局（PC端）

固定布局常用于Pc端，当然，如果练习时，也可以移动端使用，缺点就是兼容性较差。大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

流动布局（百分比布局）

流动布局，就是用百分百的一个布局，这样的优点便是自适应， 缺点是不够灵活，添加元素时，需要更改其他元素的值。

流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。

flex布局（弹性盒布局）

PC端也使用flex布局，这是一个css3的新布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。该布局最主要的便是确定主轴和侧轴。 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。

媒体查询和rem布局（主流）

@media使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem可以实现移动端的布局。具有较好的页面效果，根据不同的设备来设定不同根元素，然后通过计算来设定rem，从而达到良好的兼容性，这是当下较为流行的布局方式。

响应式布局

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后在智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。bootstrap的栅格系统就是一个响应式布局的较好的选择。三星官网便是使用的响应式布局。

注：仅供学习和参考，若有侵权请联系作者