Question

我有一个标准的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%;
}

我不知道为什么它不起作用，你们可以帮助我吗？

Answer 1

  use this in CSS 2

 -------------- 
body{
  background-color: black !important;
  width: 100% !important;
}

Answer 2

那是因为您不检查窗口大小是否达到最小宽度的条件。使用以下css，你可以做到这一点。

参考how to use media query

使用css2作为

@media (min-width: 480px) {
 body{
    background-color: black !important;
    width: 100% !important; }}

您可以将所需的最小值放在480px

的位置

为什么我的第二个css一直在窃听？

2 个答案: