- 响应式布局：就是在不同屏幕不同分辨上实现不同的展示方式。响应式布局能使网站在手机和平板电脑上有更好的浏览体验，也就就是说一个网站能后兼容多个终端，而不是为了每一个终端做一个特定的版本。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>%和rem布局</title><style>html { font-size: 30px; } .box2 { width: 10rem; height: 10rem; background-color: plum; } .box { width: 80%; height: 200px; background-color: aquamarine; } .part { width: 80%; height: 80%; background-color: pink; } </style></head><body><divclass="box"><divclass="part"></div></div><divclass="box2"></div></body></html>
- 自适应布局：就是能为了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，需要开发多套界面来适应不同的终端。
<divclass="container"><divclass="left">固定宽度</div><divclass="right">自适应</div></div>
* { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: none; width: 100%; height: 100%; background-color: #9dc3e6; }
区别：
1、自适应布局：是通过检测视口分辨率来判断当前访问的设备屏幕大小，从而请求服务层返回不同的页面。
响应式布局：是通过检测视口分辨率针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素，而响应式布局是一套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤，响应式布局可以自动识别屏幕宽度并作出相应的调整页面设计
