自适应布局方式

Question

有哪些方法可以实现自适应布局？

Answer 1

媒介查询media

Answer 2

这个方法有很多种，可以搭配着来：
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

总的来说，方法就是这些，通过练习去熟悉掌握自己的一套方法即可。