Question

我在这里有点困惑...我找到了一些用于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;

}

}

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

Answer 1

我认为以下代码将为您提供帮助。

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

Answer 2

媒体查询可能有很多条件

仅适用于小于500像素的屏幕 @media only screen and (max-width:500px)
仅适用于200像素到500像素之间的屏幕 @media only screen and (min-width:200px) and (max-width:500px)
仅适用于大于500像素的屏幕 @media only screen and (min-width:500px)
仅适用于各种尺寸的屏幕 @media only screen
仅适用于各种尺寸的打印 @media only print
仅适用于正方形屏幕 @media (aspect-ratio: 1/1)
仅适用于正方形屏幕 @media (aspect-ratio: 1/1)
仅适用于纵横比大于：16/9的屏幕 @media (-max-aspect-ratio: 16/9)

ecc ..您可以指定像素比率或dpi以更好地满足您的需求

如何进行媒体查询而不影响其他媒体查询

2 个答案: