使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
需求:
最近在开发pc端一个功能模块,当屏幕尺寸发生变化时,其页面布局也要发生变化,最大屏幕最多展示6列,当随着屏幕尺寸的缩放,其页面变成5列、4列,最少展示3列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
min-width: 600px;
display: flex;
justify-content: center;
}
.inner-wrapper {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.box {
width: 180px;
height: 180px;
background: chartreuse;
margin: 10px;
}
/* 一行6列 */
@media screen and (min-width: 1241px) and (max-width: 1920px) {
.inner-wrapper {
width: 1200px;
}
}
/* 一行5列 */
@media screen and (min-width: 1037px) and (max-width: 1240px) {
.inner-wrapper {
width: 1000px;
}
}
/* 一行4列 */
@media screen and (min-width: 841px) and (max-width: 1036px) {
.inner-wrapper {
width: 800px;
}
}
/* 一行3列 */
@media screen and (max-width: 840px) {
.inner-wrapper {
width: 600px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
6列:
5列:
4列:
3列: