添加屏幕宽度媒体查询时填充更改不起作用

Question

我有一个 侧边栏导航 的示例练习，它位于屏幕左侧固定。我说过 content-div 应该有一个 position of absolute to the body 还有一个 padding-left 宽度为侧边栏，这样我就可以将我的内容放在可见区域的中心（没有侧边栏的宽度）。

现在，当我尝试添加一个媒体查询 "when the screen is smaller than 1000px the Sidebar should disappear and the the padding of the content area should go to 0 (so that it gets centered in the normal screen width area)" 时，它不起作用。

我是 html 和 css

的初学者

这是我的代码：

body {
  font-family: 'Oswald', sans-serif;
  padding: 0;
  margin: 0;
  background-color: #35af7e;
}

@media screen and (max-width: 1000px) {
  .Sidebar {
    left: -10rem;
  }

  .body {
    padding-left: 0;
    padding: 0;
  }


}

#flex {
  display: flex;
}

/* MEDIA QUERY FIX: NAVIC ; BODY-paddingleft ;  */

.NavIc {
  left: 1rem;
  top: 1rem;
  height: 30px;
  width: 30px;
  background-color: red;
  border-radius: 3px;
  z-index: 4;
  position: fixed;
  cursor: pointer;
}

.NavIc:hover .Sidebar {
  background-color: red;
}


.Sidebar {
  position: fixed;
  width: 10rem;
  height: 100%;
  background: #E9D758;
  color: white;
  z-index: 3;
  display: flex;
  flex-direction: column;
  transition: 200ms ease-in-out;
}

.space {
  flex-grow: 1;
  width: auto;
}

.Nav {
  list-style-type: none;
  display: block;
  width: 100%;
  padding: 0;
  font-size: 1.5rem;
  z-index: 2;
  flex-grow: 18;
}

ul li {
  box-sizing: border-box;
  padding: 0.7rem 0 0.7rem 1rem;
  position: relative;
  transition: 150ms ease-in-out;
}

ul li:hover {
  background-color: white;
  color: black;
  transform: scale(1.07) translate(0.3rem);
  cursor: pointer;
}

.footnotes {
  flex-grow: 1;
  box-sizing: border-box;
  padding: 0 1rem 0 1rem;
}

hr {
  border-style: solid;
  color: white;
}

.body {
  position: absolute;
  width: 100%;
  padding-left: 10rem;
  box-sizing: border-box;
  top: 0;
  color: white;
  transition: 200ms ease-in-out;
}

.mid {
  position: relative;
  width: 60%;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.5rem;
}


.img {
  position: relative;
  max-width: 500px;
  height: auto;
  left: 50%;
  transform: translate(-50%);
  transition: 200ms ease-in-out;
}

.Logo {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  max-width: 100%;
  height: auto;
  padding: 5rem 0 5rem 0;
}

.mid > hr {
  width: 80%;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sidebar</title>

    <link rel="stylesheet" style="text/css" href="sidebar.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  </head>
  <body>

    <div class="NavIc">
    </div>

    <div class="Sidebar">
      <div class="space">
      </div>
      <ul class="Nav">
        <li>Home</li>
        <li>Gallery</li>
        <li>Our Team</li>
        <li>Contact</li>
      </ul>

      <div class="footnotes">
        <hr>
        <p>blablabla<br>
        All rights reserved</p>
        <p>blablabla</p>
      </div>
    </div>

    <div class="body">
      <div class="mid">
        <div class="img">
          <img src="Logo.svg" alt="Logo" class="Logo">
        </div>

        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.Commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><p>Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>
        <hr>
 
      </div>
    </div>

  </body>
</html>

Answer 1

在您的媒体查询中，使用 display: none; 隐藏侧边栏，然后设置 padding: 0px; 您的内容。就是这样。

@media only screen and (max-width: 1000px) {
 .Sidebar{
 display: none;
 }
 .body{
 display: block;
 padding: 0px;
 }
}

Answer 2

因为您在 @media (max-width: 1000px) 中的 .body 规则被覆盖了。使用 !important 或学习一些 CSS specificity/precedence.

body {
  font-family: 'Oswald', sans-serif;
  padding: 0;
  margin: 0;
  background-color: #35af7e;
}

@media screen and (max-width: 1000px) {
  .Sidebar {
    left: -10rem;
  }

  .body {
    padding-left: 0 !important;
    padding: 0;
  }


}

#flex {
  display: flex;
}

/* MEDIA QUERY FIX: NAVIC ; BODY-paddingleft ;  */

.NavIc {
  left: 1rem;
  top: 1rem;
  height: 30px;
  width: 30px;
  background-color: red;
  border-radius: 3px;
  z-index: 4;
  position: fixed;
  cursor: pointer;
}

.NavIc:hover .Sidebar {
  background-color: red;
}


.Sidebar {
  position: fixed;
  width: 10rem;
  height: 100%;
  background: #E9D758;
  color: white;
  z-index: 3;
  display: flex;
  flex-direction: column;
  transition: 200ms ease-in-out;
}

.space {
  flex-grow: 1;
  width: auto;
}

.Nav {
  list-style-type: none;
  display: block;
  width: 100%;
  padding: 0;
  font-size: 1.5rem;
  z-index: 2;
  flex-grow: 18;
}

ul li {
  box-sizing: border-box;
  padding: 0.7rem 0 0.7rem 1rem;
  position: relative;
  transition: 150ms ease-in-out;
}

ul li:hover {
  background-color: white;
  color: black;
  transform: scale(1.07) translate(0.3rem);
  cursor: pointer;
}

.footnotes {
  flex-grow: 1;
  box-sizing: border-box;
  padding: 0 1rem 0 1rem;
}

hr {
  border-style: solid;
  color: white;
}

.body {
  position: absolute;
  width: 100%;
  padding-left: 10rem;
  box-sizing: border-box;
  top: 0;
  color: white;
  transition: 200ms ease-in-out;
}

.mid {
  position: relative;
  width: 60%;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.5rem;
}


.img {
  position: relative;
  max-width: 500px;
  height: auto;
  left: 50%;
  transform: translate(-50%);
  transition: 200ms ease-in-out;
}

.Logo {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  max-width: 100%;
  height: auto;
  padding: 5rem 0 5rem 0;
}

.mid > hr {
  width: 80%;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sidebar</title>

    <link rel="stylesheet" style="text/css" href="sidebar.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  </head>
  <body>

    <div class="NavIc">
    </div>

    <div class="Sidebar">
      <div class="space">
      </div>
      <ul class="Nav">
        <li>Home</li>
        <li>Gallery</li>
        <li>Our Team</li>
        <li>Contact</li>
      </ul>

      <div class="footnotes">
        <hr>
        <p>blablabla<br>
        All rights reserved</p>
        <p>blablabla</p>
      </div>
    </div>

    <div class="body">
      <div class="mid">
        <div class="img">
          <img src="Logo.svg" alt="Logo" class="Logo">
        </div>

        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.Commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><p>Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>
        <hr>
 
      </div>
    </div>

  </body>
</html>

添加屏幕宽度媒体查询时填充更改不起作用

Padding change when adding a screen width media query isn't working

html

css

static

padding

media-queries