前面的课程多数是在手机状态下查看的页面效果,现在移动端非常普及,大多数网页都会同时适配 PC 端和手机端。那么如何即适配手机端又适配 PC 端呢?
在CSS选择器的课程中,有讲过 @ 规则,但是没有细讲,借此机会再深入讲解一下 @ 规则。今天直讲 @media 这一个规则,其它关于 @ 的规则,后面遇到后再讲。@media 通俗地讲就是为了匹配不同的媒体,根据条件的不同使用不同的 CSS 样式。下面代码中的 screen 是媒体类型,在此表示带有屏幕的设备,比如电脑、手机,还有其它的媒体类型,比如 tv;and 用来组合多个条件,这里表示且,还有 not 和 only;min-width 是媒体功能,这里表示可视区域的最小宽度。整段代码的意思是匹配带有屏幕的设备,且最小尺寸是 700 像素。:
@media screen and (min-width: 700px) {
// css
}
再来看个例子,这段代码的意思是匹配带有屏幕的设备,且最小尺寸是 700 像素,最大尺寸是 900像素。
@media screen and (min-width: 700px) and (max-width: 900px) {
// css
}
@media 语法规则是:
@media mediaType and|not|only (media feture) {
// css
}
语法规则理解以后,看看我们今天的实例是如何做的。
实例代码
代码涉及到“说好不哭”的歌词,和我从 MV 截取的一部分图。通过 @media 来控制不同屏幕的布局效果。选择器的使用在 群里讨论的一个选择器问题(一定要看)这个课程有讲解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>media</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
}
.app {
background-color: #eeeeee;
}
.top {
background-color: #eeeeee;
}
.top div {
height: 200px;
margin-bottom: 5px;
background: white;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.top :nth-child(1) {
background-image: url('./images/1-1.png');
}
.top :nth-child(2) {
background-image: url('./images/1-2.png');
}
.top :nth-child(3) {
background-image: url('./images/1-3.png');
}
.top :nth-child(4) {
background-image: url('./images/1-4.png');
}
.top :nth-child(5) {
background-image: url('./images/1-5.png');
}
.content {
background-color: white;
padding-bottom: 30px;
}
.content p {
text-align: center;
padding: 10px;
font-size: 17px;
}
.title {
font-size: 24px;
color: #258BD6;
font-weight: bold;
border-bottom: 1px solid #eeeeee;
text-align: center;
width: 160px;
margin: 0 auto;
}
.title-active {
color: red;
font-size: 20px;
font-weight: bold;
}
.hidden {
display: none;
}
@media screen and (min-width: 700px) {
.app {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.top {
width: 40%;
margin-left: 30px;
margin-right: 30px;
}
.top div {
height: 250px;
}
.content {
width: 60%;
margin-right: 30px;
}
.hidden {
display: block;
}
}
</style>
</head>
<body>
<div class="app">
<div class="top">
<div></div>
<div></div>
<div></div>
<div class="hidden"></div>
<div class="hidden"></div>
</div>
<div class="content">
<h2 class="title">说好不哭</h2>
<p>没有了联络后来的生活</p>
<p>我都是听别人说</p>
<p>说你怎么了说你怎么过</p>
<p>放不下的人是我</p>
<p class="title-active">人多的时候就待在角落</p>
<p>就怕别人问起我</p>
<p>你们怎么了你低着头</p>
<p>护着我连抱怨都没有</p>
<p>电话开始躲从不对我说</p>
<p>不习惯一个人生活</p>
<p>离开我以后要我好好过</p>
<p>怕打扰想自由的我</p>
<p>都这个时候你还在意着</p>
<p>别人是怎么怎么看我的</p>
<p>拼命解释着不是我的错是你要走</p>
<p>眼看着你难过挽留的话却没有说</p>
<p>你会微笑放手说好不哭让我走</p>
<p>电话开始躲从不对我说</p>
<p>不习惯一个人生活</p>
<p>离开我以后要我好好过</p>
<p>怕打扰想自由的我</p>
<p>都这个时候你还在意着</p>
<p>别人是怎么怎么看我的</p>
<p>拼命解释着不是我的错是你要走</p>
<p>眼看着你难过挽留的话却没有说</p>
<p>你会微笑放手说好不哭让我走</p>
<p>你什么都没有却还为我的梦加油</p>
<p>心疼过了多久还在找理由等我</p>
</div>
</div>
</body>
</html>
总结
今天打卡指令:
1.说说你使用过哪些 @ 规则?
2.直接打卡:不知不觉已过去一半,再坚持一下。
推荐阅读: