@media 屏幕和 (max-width:768px) 不起作用

Question

I'm creating a new website for my uni assignment but my @media screen and (max-width:720px) does not have any changes when I typed in the code as provided as below.我正在为我的 uni 作业创建一个新网站，但是当我输入如下提供的代码时，我的 @media 屏幕和 (max-width:720px) 没有任何更改。 What I am trying to do is that I want to make my navigation-links to hide under a burger to be display in mobile (will include javascript once this is working)我想要做的是我想让我的导航链接隐藏在一个汉堡下以在移动设备中显示（一旦工作，将包括 javascript）

I had tried with我试过

@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;
}

and also with还有

@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;
}
}

both worked but when come to两者都有效，但是到了

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

}

it doesn't seem to be working btw I also have它似乎不起作用顺便说一句我也有

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

linked in html otherwise my @media 1024px and 1280px won't work在 html 中链接，否则我的 @media 1024px 和 1280px 将不起作用

@media screen and (max-width:720px){
    body {
        overflow-x: hidden;
    }

    #links{
        position:absolute;
        right:0px;
        height: 92vh;
        top:8vh;
        background-color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
    }

    .burger {
     display:block;
    }
}

I want it to display none on the page first so I know it work properly我希望它首先在页面上不显示任何内容，以便我知道它可以正常工作

btw this is my html顺便说一句，这是我的 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>

Answer 1

You should write media queries from small screens to large screens.您应该编写从小屏幕到大屏幕的媒体查询。 Becouse last line css code overwrites to over previous css lines.因为最后一行 css 代码覆盖了之前的 css 行。 For example from bootstrap;例如来自引导程序；

// 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) { ... }

Answer 2

Check if you have some other media query that interfere in small screen size, you can use your browser Inspector, scale you screen size under 720px, select you body from the source (elements tab) and in the right sidebar check where the display property is set.检查您是否有其他一些干扰小屏幕尺寸的媒体查询，您可以使用浏览器检查器，将屏幕尺寸缩放到 720 像素以下，从源（元素选项卡）中选择您的身体，然后在右侧边栏中检查显示属性的位置放。

Maybe in other CSS the same element is targeted and the display property is set.也许在其他 CSS 中，相同的元素被定位并设置了 display 属性。

Answer 3

Based on the code you have provided, your media queries are working, you just can't tell because there is no content.根据您提供的代码，您的媒体查询正在运行，您只是无法判断，因为没有内容。

The browser will display the default which is a white background unless you have specified otherwise, which based on the code supplied, there is nothing to show once the browser resizes above 720px .除非您另外指定，否则浏览器将显示默认为白色背景，根据提供的代码，一旦浏览器调整大小超过720px ，就没有任何显示。

Add some content to the body and try resizing the browser to the relative break-points, or perhaps try adding the below to visibly see the change.向正文添加一些内容并尝试将浏览器的大小调整为相对断点，或者尝试添加以下内容以明显地看到更改。

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

@media 屏幕和 (max-width:768px) 不起作用

问题描述

3 个解决方案

解决方案1
1 2019-07-30 07:56:03

解决方案2
0 2019-07-30 07:38:43

解决方案3
0 2019-07-30 07:44:42

@media 屏幕和 (max-width:768px) 不起作用

问题描述

3 个解决方案

解决方案1 1 2019-07-30 07:56:03

解决方案2 0 2019-07-30 07:38:43

解决方案3 0 2019-07-30 07:44:42

解决方案1
1 2019-07-30 07:56:03

解决方案2
0 2019-07-30 07:38:43

解决方案3
0 2019-07-30 07:44:42