我想创建一个网站，使用这个网站，我希望它与所有小型、大型和中型屏幕兼容
我想在小屏幕上放两个图标，并将它们隐藏在大屏幕之外，为此，我将以下指令放在CSS文件中：
nav .fa{
display: none !important;
}
但是图标并没有隐藏在大屏幕之外。
我该如何解决这个问题？
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>
University Website Design
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-
free@5.15.4/css/fontawesome.min.css">
</head>
<body>
<section class="header">
<nav>
<a href="index.html">
<img src="images/TP-Link-Logo.wine.svg">
</a>
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>
<a href="">
HOME
</a>
</li>
<li>
<a href="">
ABOUT
</a>
</li>
<li>
<a href="">
COURSE
</a>
</li>
<li>
<a href="">
BLOG
</a>
</li>
<li>
<a href="">
CONTACT
</a>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>
World's Biggest University
</h1>
<p>
Make Website is now one of the easiest thing in the world.
you just need to learn HTML,CSS , <br> Javascript and you are good to go.
</p>
<a class="hero-btn">
Visit Us to Know More
</a>
</div>
</section>
</body>
</html>
这是我设计侧边栏界面的CSS代码，我希望图标只出现在小界面中。
style.css:
*{
padding: 0;
margin: 0;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7) , rgba(4,9,30,0.7)),
url("images/b.png");
/*background-size: 100%; This line will make the background responsive*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
/*padding: 20em;*/
/*background-image: url("images/b.png");*/
/*background-repeat: no-repeat;*/
/*background-size: 100%;*/
/*background-position: center center;*/
/*background-position: 0 0; This statement like center value*/
}
nav{
display: flex;
/*padding: 1-top bottom 2-right left*/
padding: 1% 4%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 150px;
}
.nav-links{
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a{
text-decoration: none;
color: white;
font-size: 0.813rem;
font-weight: 200;
}
.nav-links ul li::after{
content: '';
width: 0;
height: 2px;
background: #4accd5;
display: block;
margin: auto;
transition: 0.3s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
color: #fff;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1{
font-size: 3rem;
}
.text-box p{
font-size: 1rem;
margin-top: 0.8rem;
margin-bottom: 1.8rem;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
nav .fa{
display: none !important;
}
@media(max-width: 700px) {
.text-box h1{
font-size: 1.8rem;
}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
/*nav .fa{*/
/* display: block;*/
/* color: white;*/
/* margin: 10px;*/
/* font-size: 22px;*/
/* cursor: pointer;*/
/*}*/
}
使用css中的媒体查询来识别屏幕大小，当屏幕大小大于您的屏幕大小时将其隐藏。
.div1{
color: red;
}
.div2{
visibility: hidden;
}
@media only screen and (max-width: 600px) {
.div2 {
visibility: visible;
}
}<div class="div1" >Iam always visible in red color</div>
<div class="div2" >Iam Only Visible when the screen width is below 600px</div>
注意您也可以使用display:none属性
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>
University Website Design
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<style>
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7) , rgba(4,9,30,0.7)),
url("images/b.png");
/*background-size: 100%; This line will make the background responsive*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
/*padding: 20em;*/
/*background-image: url("images/b.png");*/
/*background-repeat: no-repeat;*/
/*background-size: 100%;*/
/*background-position: center center;*/
/*background-position: 0 0; This statement like center value*/
}
nav{
display: flex;
/*padding: 1-top bottom 2-right left*/
padding: 1% 4%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 150px;
}
.nav-links{
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a{
text-decoration: none;
color: white;
font-size: 0.813rem;
font-weight: 200;
}
.nav-links ul li::after{
content: '';
width: 0;
height: 2px;
background: #4accd5;
display: block;
margin: auto;
transition: 0.3s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
color: #fff;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1{
font-size: 3rem;
}
.text-box p{
font-size: 1rem;
margin-top: 0.8rem;
margin-bottom: 1.8rem;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
@media(min-width: 768px) {
nav .fa{
display: none;
}
}
@media(max-width: 767px) {
.text-box h1{
font-size: 1.8rem;
}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa{
display:block;
position: relative;
z-index: 2;
}
/*nav .fa{*/
/* display: block;*/
/* color: white;*/
/* margin: 10px;*/
/* font-size: 22px;*/
/* cursor: pointer;*/
/*}*/
}
</style>
</head>
<body>
<section class="header">
<nav>
<a href="index.html">
<img src="images/TP-Link-Logo.wine.svg">
</a>
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>
<a href="">
HOME
</a>
</li>
<li>
<a href="">
ABOUT
</a>
</li>
<li>
<a href="">
COURSE
</a>
</li>
<li>
<a href="">
BLOG
</a>
</li>
<li>
<a href="">
CONTACT
</a>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>
World's Biggest University
</h1>
<p>
Make Website is now one of the easiest thing in the world.
you just need to learn HTML,CSS , <br> Javascript and you are good to go.
</p>
<a class="hero-btn">
Visit Us to Know More
</a>
</div>
</section>
</body>
</html>