网页中自适应和响应式布局的区别

自适应布局：多套

自适应布局是是为了解决如何才能在不同大小的设备上呈现同样的网页;它的缺点是当屏幕缩放过小时,虽然能显示但太过拥挤/不能够自动适应调整网页的布局!

响应式网站：一套

响应式布局就是为了解决它的缺点而来的, 可以根据屏幕的缩放,不仅可以自动适应,还能自动调整页面的布局,使页面更加的美观;它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动!    比如一行中显示6个图片,当调整宽度为之前的50%时,就会变成一行三个

 

响应式网站如何实现：

1.允许网页宽度自动调整

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.尽量少使用绝对宽度

　　rem:可以设置字体和元素大小;  相对于根元素来说

　　em:设置字体大小; 相对于父级元素　

　　百分比:

　　width:auto

3.图片视频自适应　

　　img, object { max-width: 100%;}  

4.或者可以引入写好的库:

　　像移动端布局  flexble.js

5.一些UI框架自带的响应式方法:

　　像element-ui ，bootstrap,layui