前端开发布局方式汇总

前端开发布局方式汇总

1、百分比布局

页面元素的宽和高使用百分比，在页面缩放的时候会自动调整大小，常见移动端开发布局方案

2、flex布局

使用flex，弹性盒子进行布局，可以更加灵活的对页面中的div进行布局与规划，可以更加便捷的进行一些弹性的排布，css提供了一些针对于弹性布局的独有的属性能够快速的实现居中、分布、不同间距等排列组合方式。

3、rem布局

rem是一种常见的响应式布局方式，常见于移动端。通常情况下1rem=1font-size，这里的font-size由页面的的html中定义的大小决定，默认为16px=1rem，在响应式页面中随着页面的变化，html中所对应的font-size也将发生实时的变化。而rem可以很好的解决这一问题。始终页面中元素的大小都是和页面的font-size成正比的关系，常用于响应式开发页面。

4、普通px布局

1px即1css标准像素，对应移动端视网膜屏幕为2物理像素，对应pc端为1物理像素。