一开口就知道是老qq看点了,今天从youtube上学了一招,一行代码解决响应式布局的处理,只适用于大方向的布局,对于布局细节还是要用媒体查询。
1 先看看基础布局和基础css
<!DOCTYPE html>
<html lang="en">
<head>
...hidden
</head>
<body>
<div class="container">
<div class="queto">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eius dolorem officiis est accusantium animi.</p>
<span>鲁迅</span>
</div>
<div class="queto">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eius dolorem officiis est accusantium animi.</p>
<span>鲁迅</span>
</div>
<div class="queto">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eius dolorem officiis est accusantium animi.</p>
<span>鲁迅</span>
</div>
<div class="queto">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eius dolorem officiis est accusantium animi.</p>
<span>鲁迅</span>
</div>
</div>
</div>
</body>
</html>
.container {
padding: 2em;
display: grid;
gap: 2em;
}
.container .queto{
padding: 2em;
border-radius: 0.3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
}
.container .queto span {
font-weight: bold;
position: relative;
margin-left: 15px;
}
.container .queto span::before {
content: "";
position: absolute;
height: 1px;
width: 10px;
border-bottom: 1px solid black;
top: 10px;
left: -15px;
}
/**
传统的响应式方法*/
@media (min-width: 550px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 950px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1100px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}
效果如下:
分别在Breakpoint为550px、950px、1100px时完成双列、三列、四列布局。
2 使用auto-fit、auto-fill、minmax()替换Media Query
我们将css中描述container类的代码做如下改动:
.container {
padding: 2em;
display: grid;
gap: 2em;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/*
or
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
*/
}
这是指对于每重复的一列最小值使用250px…反正很神奇就是了