这是我的html代码,我的目标是两个媒体查询:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="assests/css/style.css">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Stacy Areas</title>
</head>
<body>
<div class="mainContainer">
<header id="navLink">
<div class="container">
<a href="index.html" id="logo">Stacy Areas</a>
<nav>
<a href="index.html">About</a>
<a href="portfolio.html">Portfolio</a>
<a href="contact.html">Contact</a>
</nav>
</div>
</header>
<div class="aboutMe">
<div class="aboutHeader">
<h2>About Me</h2>
</div>
<div class="aboutContent">
<img class="aboutImage" src="assests/images/me.jpg"
alt="stacy areas">
<p>stuff</p>
</div>
</div>
<div class="iconLinks">
<h3>Connect with me</h3>
<a href="https://github.com/stacy89"><img
src="assests/images/github.png"></a>
<a href="https://www.linkedin.com/in/stacyareas/"><img
src="assests/images/linkedin.png"></a>
<a href="https://stackoverflow.com/users/7371834/stacy-areas">
<img src="assests/images/stackoverflow.png"></a>
</div>
<footer>copyright @ 2018 stacyareas</footer>
</div>
</body>
</html>
这是我的css代码,用于调用我的两个查询。 我觉得我对如何使用它们有一个基本的了解,但我没有太多使用它们的经验,所以我可能只是误解。或者也许过度看。
@media only screen and (max-width: 980px, 768px, 640px) {
.mainContainer {
background-color: black;
}
.iconLinks {
width: 670px;
}
}