css样式怎么解决div盒子宽度随着变化而变化，css样式怎么实现响应式，自适应。

在前端工程师编写网页时最困扰的事情就是数据交互和页面自适应。什么是页面自适应?

 

自适应是什么?

页面自适应就是一个网页可以在不同大小的窗口不同的设备都完整的显示同一个网页。

 

解决方法

css样式中可以使用fiex部件（粘性布局），百分比布局，rem布局来实现网页自适应。

 

fiex布局

 flex布局属性大全

 百分比布局

div { padding: 50%; }

 

div { height: 50%; }

div { width: 50%; }

 

rem布局

rem(root em)是一个相对单位，基准是相对html元素字体大小，类似em(父元素字体大小)
比如，根元素(html)设置font-size=12px，非根元素设置width：2rem；，转换成px就是24px。
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例。