我有一个标准的 css，但我想要第二个 css 文件，只要窗口的宽度达到最小宽度，就会使用该文件。这是我的代码。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webblog</title>
<script type="text/javascript" src="js/javascript.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/500.css" media="screen and (min-width: 500px)"/>
</head>
<body onload='setBodyScale()'>
<!-- HTML for the menu -->
<div id="menu_main">
<div id="menu_logo">
<img id="menu_img" src="img/logo.png" alt="image not responding">
</div>
<div id="menu_item">
<p id="menu_text">Blog WebDeveloper Aron</p>
<ul id="menu_button">
<li class="menu">Home</li>
<li class="menu">Posts</li>
</ul>
</div>
</div>
<!-- End of the menu HTML-->
<div id="posts"></div>
<div id="posts_recent">
<h1>Inloggen</h1>
<form method="post" action="index.html">
<label for="user">Gebruikersnaam:</label>
<input type="text" name="user" id="users" />
<label for="pass">Wachtwoord:</label>
<input type="password" name="pass" id="pass" />
<input type="submit" value="Inloggen" id="submit" />
</form>
</div>
</body>
</html>
CSS:
body{
background-color: green;
width: 90%;
margin-left: 5%;
}
/* Style for the menu */
#menu_main{
height: 8vw;
background-color: red;
border: 3px solid black;
}
#menu_img{
background-color: black;
position: absolute;
width: 10%;
margin-left: 7%;
padding: 0.5%;
}
#menu_item{
width: 45%;
float: right;
margin-top: 1%;
margin-right: 4%;
padding-left: 2%;
border-left: 2px solid black;
}
#menu_text{
padding-bottom: 2%;
font-size: 2vw;
font-weight: bold;
}
.menu{
display: inline-block;
width: 30%;
border: 2px solid black;
font-size: 1.5vw;
font-weight: bold;
text-align: center;
padding: 1%;
background-color: white;
}
.menu:nth-child(2){
margin-left: 3%;
margin-right: 3%;
}
.menu:hover{
background-color: lightgrey;
}
/* End of the menu style */
/* Post div */
#posts{
position: absolute;
z-index: -1;
width: 65%;
height: 90%;
margin-top: 3%;
background-color: blue;
border: 3px solid black;
}
#posts_recent{
position: absolute;
width: 20%;
height: 90%;
margin-top: 3%;
margin-left: 70%;
background-color: white;
border: 3px solid black;
}
h1{
margin-left: 34%;
margin-top: 3%;
margin-bottom: 2%;
font-size: 120%;
font-weight: bold;
}
form{
padding: 1%;
border-bottom: 1px solid black;
}
#pass{
margin-left: 10%;
width: 50%;
}
#users{
width: 50%;
}
#submit{
margin-left: 37%;
margin-top: 3%;
margin-bottom: 2%;
}
CSS 2:
body{
background-color: black;
width: 100%;
}
我不知道为什么它不起作用，你们可以帮助我吗？
最佳答案
那是因为你没有检查窗口大小是否达到最小宽度的条件。使用以下 CSS，您也许可以做到这一点。
使用CSS2作为
@media (min-width: 480px) {
body{
background-color: black !important;
width: 100% !important; }}
您可以将所需的最小值放在 480px 的位置
关于html - 为什么我的第二个 css 总是出问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37480382/