前端自适应布局方案

流式布局

使用百分比单位等单位来表示长度和宽度，这样在整体的长度和宽度变化的时候，里面的内容也会发生变化。

使用 %

直接使用百分比，在页面宽度变化的时候会对应放大缩小。

Copy





Document


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-box {
width: 100%;
height: 100vh;
background-color: orange;
padding: 1px;
}
.first,
.second,
.third {
width: 80%;
height: 30%;
background-color: skyblue;
margin: 1% auto;
}




1
2
3




使用 rem

可以根据宽度的变化来修改根标签html中的 font-size属性的大小，然后就可以在改变宽度的时候改变页面中元素的带下。

Copy





Document


.container-box {
width: 100%;
height: 100vh;
padding: 1px;
background-color: orange;
}
.first,
.second,
.third {
width: 20rem;
height: 20rem;
margin: 1rem auto;
background-color: skyblue;
}
@media screen and (max-width: 768px) {
html {
font-size: 12px;
}
}




1
2
3




直接使用媒体查询

这个不就描述了，其实就是和使用 rem 差不多，只不过是直接重写在不同宽度下的样式而已。

弹性布局

Copy
display: flex

这个在整个页面是单个 div 时可能比较有用，如果页面有多个 div 都需要自适应，那么可能会相互影响布局。

栅格布局

使用 grid 本身的一些属性来实现响应式。

Copy





Document


.container-box {
width: 100%;
height: 100vh;
padding: 1px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 列自适应，最小宽度200px */
grid-gap: 10px; /* 设置网格间隙为10px */
}
.item {
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}




1
2
3
4
5
6




以上就是常见的几种 响应式 方案。