时间戳

首页 > 解决方案 > 我的媒体查询不起作用的原因是什么

javascript - 我的媒体查询不起作用的原因是什么

问题描述

我需要摆脱媒体查询“媒体屏幕和（最大宽度：500 像素）”，因为我希望我的默认设置适用于任何小于 500 像素的屏幕，并且我不应该为我的默认设置指定屏幕宽度。但是，每当我摆脱这个媒体标签时，它都会破坏/弄乱我的其余媒体标签以及这些尺寸的屏幕设置。如何将我的设置的默认设置设置为 500 像素以下的移动设备，然后保留更大屏幕的规则？更大的屏幕需要保持相同的布局。谢谢。

这是我的代码：

* {
  box-sizing: border-box;
}

i {
  margin-top: 2px;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hamburger {
  background-color: grey;
  width: 100%;
  color: white;
  text-align: right;
}

section {
  border: grey solid 1px;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5px;
  border-radius: 5px;
  text-align: center;
}

p {
  text-align: left;
  margin-left: 5px;
  margin-right: 3px
}

li {
  list-style-type: none;
}

@media screen and (max-width: 500px) {
  header {
    display: flex;
    flex-direction: column;
    margin-left: 80px;
  }
  .menu {
    display: none;
  }
  .social {
    flex-direction: row;
    display: flex;
    justify-content: space-around;
  }
}

@media screen and (max-width: 1000px) {
  .menu {
    display: none;
  }
  div {
    align-items: center;
  }
  .social {
    display: flex;
    justify-content: center;
    justify-content: space-around;
    border-top: grey 1px solid;
  }
  li,
  .social {
    margin-top: 5px;
  }
  .logo,
  h1 {
    display: inline;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    right: 10%
  }
}

@media screen and (min-width: 1001px) {
  .hamburger {
    display: none;
  }
  .menu {
    text-align: right;
    background-color: grey;
    height: 50px;
    color: white;
    width: 100%;
  }
  .navbar {
    display: inline-block;
    margin-right: 30px;
    padding-top: 15px;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    right: 10%;
    top: 20px;
  }
  main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-evenly;
  }
  section {
    width: 30%;
    margin: 0;
  }
  .social {
    display: flex;
    justify-content: space-around;
    padding-top: 2%;
    border-top: grey 1px solid;
    list-style-type: none;
  }
}

.logo>img {
  width: 50px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li class="navbar">Home</li>
      <li class="navbar">Products</li>
      <li class="navbar">About</li>
      <li class="navbar">Help</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>

标签： javascripthtmlcss

解决方案

* {
  box-sizing: border-box;
}

i {
  margin-top: 2px;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hamburger {
  background-color: grey;
  width: 100%;
  color: white;
  text-align: right;
}

section {
  border: grey solid 1px;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5px;
  border-radius: 5px;
  text-align: center;
}

p {
  text-align: left;
  margin-left: 5px;
  margin-right: 3px
}

li {
  list-style-type: none;
}

header {
    display: flex;
    flex-direction: column;
    margin-left: 80px;
  }
  .menu {
    display: none;
  }
  .social {
    flex-direction: row;
    display: flex;
    justify-content: space-around;
  }

@media screen and (min-width: 501px)and (max-width: 1000px) {
  .menu {
    display: none;
  }
  div {
    align-items: center;
  }
  .social {
    display: flex;
    justify-content: center;
    justify-content: space-around;
    border-top: grey 1px solid;
  }
  li,
  .social {
    margin-top: 5px;
  }
  .logo,
  h1 {
    display: inline;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    right: 10%;
    flex-direction: row;
    margin-left: 0;
  }
}

@media screen and (min-width: 1001px) {
  .hamburger {
    display: none;
  }
  .menu {
    text-align: right;
    background-color: grey;
    display: block;
    height: 50px;
    color: white;
    width: 100%;
  }
  .navbar {
    display: inline-block;
    margin-right: 30px;
    padding-top: 15px;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    flex-direction: row;
    right: 10%;
    top: 20px;
    margin-left: 0;
  }
  main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-evenly;
  }
  section {
    width: 30%;
    margin: 0;
  }
  .social {
    display: flex;
    justify-content: space-around;
    padding-top: 2%;
    border-top: grey 1px solid;
    list-style-type: none;
  }
}

.logo>img {
  width: 50px;
}

这应该是您正在寻找的。

它不起作用的原因是你 max-width 500 有一些更高宽度不需要的样式；因此，如果您希望 max-width 500 成为默认值，则必须针对更高的宽度进行更改。

因为它可能不是很清楚，所以我改变的是： 1. 将样式从媒体查询 max-width 500px 移动到任何查询之外 2. 将第二个查询更改为包括 min-width 501px 3. 添加 flex-direction：排; & 左边距：0；剩下的两个查询

我相当确定您的 css 可以优化 btw，但由于这不是问题的范围，我现在不会这样做。

推荐阅读