时间戳

首页 > 解决方案 > 如何在不影响其他媒体查询的情况下进行媒体查询

css - 如何在不影响其他媒体查询的情况下进行媒体查询

问题描述

我在这里有点困惑......我找到了一些用于我的 css 媒体查询的常见断点，但我只使用最大宽度，例如 @media screen 和 (max-width: 812px) {} 等，但它似乎正在移动我的其他媒体查询。我认为这应该只影响 812px 或更小的代码。我是否需要同时添加最小宽度和最大宽度来解决问题？

@media only screen and (max-width: 50em) and (orientation: portrait) {
label {
  width: 100%;
  display: block;
  position: relative;


}

.nav {
  width: 200%;

}

#nav-icon {
  font-size: 28px;
  line-height: 50px;
  padding-left: 1em;
  color:  #ffffff;
  background-color: #f44336;
}

div.nav ul, div.nav li, label{
  line-height: 50px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
  width: 150%;
  position: relative;
  font-size: .9em;

}

div.header2_welcome h1{
  text-align: center;
  font-family: 'Pacifico', cursive;
  font-size: 1em;
  position: absolute;
  top: 5em;
  left: 0em !important;
  text-decoration: none;
  white-space: nowrap;
}





img.pc101 {
  width: 20em;
  height: 7em;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 27em;
 margin-left: -15em;
  font-size: .8em;

}



div.natural {
  font-size: 150px;
  position: relative;
  right: .5em;
  top: 2em;
  animation: drop 2s ease forwards;
  margin-bottom: 1em;

}

div.flat {
  font-size: 150px;
  position: relative;
  left: 1200px;
  bottom: 450px;
  top: 8em;
}

div.treble_clef {
  font-size: 100px;
  position: relative;
  right: 400px;
  bottom: 400px;

}

div.crotchet_rest {
  font-size: 6em;
  position: relative;
  left: 100px;
  bottom: 800px;
}

div.crotchet {
  font-size: 6em;
  position: absolute;
  left: 3.5em !important;
  top: 3em;
  animation: drop 2s ease forwards;
}

div.minim {
  font-size: 6em;
  position: absolute;
  left: 1.5em;
  top: 2em;
  animation: drop 2s ease forwards;

}

}

这只是我的代码示例，但不知道它正在移动我的其他媒体查询..

标签： css

解决方案

我认为以下代码会对您有所帮助。

<style>
  @media only screen and (max-width:768px) and (min-width:200px)
  {
     /* Your CSS Code */
  }
</style>

推荐阅读