响应式
代码语言：javascript复制<script>
function init() {
var width = document.documentElement.clientWidth
document.documentElement.style.fontSize = width / 10 'px'
}
init()
window.addEventListener('orientationchange', init)
window.addEventListener('resize', init)
</script>css媒体查询
代码语言：javascript复制 <style>
.parent {
width: 100%;
height: 600px;
}
.child {
float: left;
height: 100px;
}
@media screen and (max-width: 960px) {
.child {
width: 33.3%;
}
.child-1 {
background-color: red;
}
.child-2 {
background-color: green;
}
.child-3 {
background-color: blue;
}
}
@media screen and (max-width: 768px) {
.child {
width: 50%;
}
.child-1 {
background-color: red;
}
.child-2 {
background-color: green;
}
.child-3 {
background-color: blue;
}
}
@media screen and (max-width: 550px) {
.child {
width: 100%;
}
.child-1 {
background-color: red;
}
.child-2 {
background-color: green;
}
.child-3 {
background-color: blue;
}
}
</style>
<style media="(min-width: 960px) and (max-width: 1080px)">
.child {
width: 25%;
}
.child-1 {
background-color: red;
}
.child-2 {
background-color: green;
}
.child-3 {
background-color: blue;
}
</style>
<link href="./rwd.css" rel="stylesheet" media="(min-width: 1081px) and (max-width: 1920px)" />flex弹性布局
代码语言：javascript复制// 存在剩余空间时设置间距的方式
justify-content: ;
