Html @媒体屏幕和（最大宽度：768px）不工作_Html_Css

Html @媒体屏幕和（最大宽度：768px）不工作

html css

Html @媒体屏幕和（最大宽度：768px）不工作,html,css,Html,Css,我正在为我的大学作业创建一个新网站，但我的 @媒体屏幕和最大宽度：720px 当我输入下面提供的代码时，没有任何更改。我想做的是，我想让我的导航链接隐藏在一个汉堡包下，在手机上显示出来，一旦它起作用，就会包含javascript 我试过了 @media screen and (max-width:1280px){ #topnav { width:100%; background:#000000; } #brand { width:15%; display: inline-

我正在为我的大学作业创建一个新网站，但我的 @媒体屏幕和最大宽度：720px 当我输入下面提供的代码时，没有任何更改。我想做的是，我想让我的导航链接隐藏在一个汉堡包下，在手机上显示出来，一旦它起作用，就会包含javascript

我试过了

@media screen and (max-width:1280px){
#topnav {
  width:100%;
  background:#000000;
}
#brand {
    width:15%;
    display: inline-block;
}
#brand h1 {
    display: inline-block;
  font-family: sans-serif;
  color: #fff;
  font-size: 30px;
  font-style: italic;
  word-spacing: 5px;
  line-height: 1.5;
  margin: 0 0 0 0;
    padding-left: 10%;
}

#search,form,button{
    display: inline-block;
    width: 30%;
    height: 44px;
    text-align: left;
    margin: 0;
    margin-left: 20px;
}

.srch_bar {
    display:inline-block;
    width: 300%;
    border-radius: 5px;
    height: 30px;
    font-size: 20px;
    font-weight: 600;
    padding: 5px;
}
input {
    border: none;
    display: inline-block;
}
button {
    border: none;
    background-color: #fff;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    width: 10px;
    padding: 0;
    margin-left: 42%;
}
.clr-btn {
    color:#636c72;
}
#link {
    display: inline-block;
    width: 45%;
}
#link a{
    text-decoration: none;
    font-size:20px;
    color: #fff;
    padding-left:1%;
    padding-right:1%;
}
.szp {
    color: #F07330;
    font-size: 20px;
}
.szr {
    color: #F20000;
    font-size: 20px;
}
.szs {
    color: #063780;
    font-size: 22px;
    font-weight: 600;
}
.szu {
    color: #1E7305;
    font-size: 24px;
}

还有

@media screen and (max-width:1024px){
    #topnav {
    width:100%;
    background:#000000;
}
#brand {
    width:17%;
    display: inline-block;
}
#brand h1 {
    display: inline-block;
    font-family: sans-serif;
    color: #fff;
    font-size: 25px;
    font-style: italic;
    word-spacing: 5px;
    line-height: 1.5;
    margin: 0 0 0 0;
    padding-left: 10%;
}

#search,form,button{
    display: inline-block;
    width: 25%;
    height: 44px;
    text-align: left;
    margin: 0;
    margin-left: 15px;
}

.srch_bar {
    display:inline-block;
    width: 330%;
    border-radius: 5px;
    height: 30px;
    font-size: 15px;
    font-weight: 600;
    padding: 5px;
}
input {
    border: none;
    display: inline-block;
}
button {
    border: none;
    background-color: #fff;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    width: 10px;
    padding: 0;
    margin-left: 42%;
}
.clr-btn {
    color:#636c72;
}
#link {
    display: inline-block;
    width: 53%;
    margin: 0;
}
#link a{
    text-decoration: none;
    font-size:18px;
    color: #fff;
}
.szp {
    color: #F07330;
    font-size: 20px;
}
.szr {
    color: #F20000;
    font-size: 20px;
}
.szs {
    color: #063780;
    font-size: 22px;
    font-weight: 600;
}
.szu {
    color: #1E7305;
    font-size: 24px;
}
}

两人都工作了，但到了

@media screen and (max-width:768px){

}

它似乎不工作顺便说一句，我也有

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我希望它在页面上显示没有第一，所以我知道它工作正常

顺便说一句，这是我的html

<html>

 <head>
   <title>Solexton</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" 
    href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
    integrity="sha384- 
    50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
    crossorigin="anonymous">
   <link rel="icon" href="C:\Users\User\Desktop\picas\s.png" type="image/png">
   <link rel="stylesheet" href="C:\xampp\htdocs\wdt\asg\css\style.css" type="text/css">
</head>

<body>
  <div id="topnav">
    <div id="brand">
      <h1 class="logo"><i class="fab fa-stripe-s"></i>olexton</h1>
    </div>
    <div id="search">
      <form action="search.php" method="post">
        <input class="srch_bar" type="text" name="search_key" 
         placeholder="Looking for..."/>
      </form>
        <button class="srch-btn" name="submit"><i class="fas fa-search clr- 
         btn"></i></button>
    </div>
    <div id="link">
      <a href="promo.html"><i class="fas fa-percent szp"></i> Promotions</a>
      <a href="room.html"><i class="fas fa-bed szr"></i>  Rooms</a>
      <a href="booking.html"><i class="far fa-bookmark szs"></i> Saved</a>
      <a href="signin.php"><i class="far fa-user-circle szu"></i> Sign 
       In</a>
    </div>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
</div>

</body>
</html>

检查是否存在干扰小屏幕大小的其他媒体查询，可以使用浏览器检查器，将屏幕大小缩放到720px以下，从“源元素”选项卡中选择“主体”，并在右侧栏中检查“显示”属性的设置位置

可能在其他CSS中，相同的元素是目标元素，并且设置了display属性。

根据您提供的代码，您的媒体查询正在运行，您无法判断，因为没有内容

除非您另有指定，否则浏览器将显示默认的白色背景。根据提供的代码，一旦浏览器的大小调整到720px以上，就不会显示任何内容

向正文中添加一些内容，然后尝试将浏览器的大小调整到相对断点，或者尝试添加下面的内容以查看更改

@media screen and (max-width:768px){
  body {
    display: block;
    background: #000;
  }
}

您应该将媒体查询从小屏幕写入大屏幕。因为最后一行css代码覆盖到前面的css行。例如，从引导

// Small devices (landscape phones, 576px and up)
@media screen and (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media screen and (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media screen and (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

你能分享你的完整代码吗？到目前为止你都尝试了什么？在JSfiddle、codepen或类似的语言中。所以我们可以分析并帮助您解决问题。到底是什么不起作用，因为我已经测试了您的代码，并且它的行为符合预期…@ScottieG那么我的问题有解决方案吗？？到底是什么原因造成的？？？@Adam\uuuuuuu看-你的代码对我有用。您遇到的问题是什么？您已经声明@media 720px不工作，但您的问题标题是@media screen and max width:768px不工作-那么是哪一个呢？@Adam___________________________________。我们只能知道你到底在说什么——我们看不到你想要达到的阿卡迪亚，我们也看不到你的眼睛。。。所以请尽量避免主观描述，比如它没有做我想做的事——那是毫无意义的；如果某件东西不起作用，请说明1它应该如何被描述为起作用，以及2它目前的样子。谢谢。我已经有一些内容了，只是我正在使用body{display:none；}来制作它，所以我知道链接btw仍然无法工作。你能将这些内容添加到问题中吗？这是有区别的。媒体查询并非如此，因为它们以浏览器大小为目标，并应用媒体查询中指定的样式。然而，这样做是一种最佳实践。那么我应该将css媒体查询更改为升序/降序吗？@Adam_u_，你不必这样做，因为这不会对媒体查询产生影响，但这通常被认为是一种良好的实践。

// Small devices (landscape phones, 576px and up)
@media screen and (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media screen and (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media screen and (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }