css中的@media媒体查询用法总结
程序员文章站
2022-05-11 09:13:27
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*{
margin: 0;padding: 0;
}
.container{
width:100vw;
margin: 0 auto;
height:100vh;
max-height: 100vh;
background-color: red;
/* background: url(img/bgc.jpg) center center / cover no-repeat rgb(34, 34, 34);
overflow: hidden; */
}
.container::before{
content: "大于1200px";
}
/*媒体查询：注意and后面需要留空格*/
@media screen and (max-width: 414px) {
.container{
width:100%;
background-color: green;
}
.container::before{
content: "414-768px";
font-size: 30px;
color: #55ff00;
text-align: center;
display: flex;
justify-content: center;
}
}
/*iphone768以下: w < 768px*/
@media screen and (max-width: 768px) and (min-width: 414px) {
.container{
width:100%;
height: 50vh;
background-color: green;
}
.container::before{
content: "414-768px";
font-size: 30px;
color: #ff0000;
text-align: center;
display: flex;
justify-content: center;
}
}
/*iPad: w >= 768 && w< 992*/
@media screen and (max-width: 992px) and (min-width: 768px) {
.container{
width:750px;
background-color: blue;
height: 70vh;
}
.container::before{
content: "768px-992px";
font-size: 30px;
color: #FFFFFF;
text-align: center;
display: flex;
justify-content: center;
}
}
/*中等屏幕 w >= 992 && w<1200*/
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container{
width:970px;
background-color: pink;
height: 80vh;
}
.container::before{
content: "992px-1200px";
font-size: 30px;
color: #000000;
text-align: center;
display: flex;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="container">
<div>asdd</div>
<div>ss</div>
</div>
</body>
</html>
上一篇： Python学习_查找某个元素是存在
下一篇： PAT_B1028 | 人口普查