有哪些方法可以实现自适应布局?
媒介查询media
这个方法有很多种,可以搭配着来:
1.较常用的,即将元素宽度设定为百分比%,vh,vw等响应式单位。
2.通过css的media
媒体查询去设计不同屏幕宽度的显示效果:
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
@media screen and (max-width: 600px) {
body {
background-color:red;
}
}
3.通过rem单位去控制响应式字体显示效果,最好与第二种方式搭配使用,用来控制文字显示效果,不建议通过rem控制元素大小,间距。
4.最low的即通过js去重写css样式。
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
监听浏览器屏幕变化,从而改变元素的显示效果。
5.补充一点,可以使用类似bootstrap的栅栏系统去实现响应式布局。
参考网址: http://v3.bootcss.com/css/#grid
总的来说,方法就是这些,通过练习去熟悉掌握自己的一套方法即可。