Reversing media query from max-width to min-width

问题: Basically, I have found a nice responsive navbar I want to use, but its @media query is set to max-width: 600px. I would like to have it set for minimum sizes, 320px and 78...

问题:

Basically, I have found a nice responsive navbar I want to use, but its @media query is set to max-width: 600px. I would like to have it set for minimum sizes, 320px and 786px. I have usually been able to reverse the code to suit but I'm really stuck on this one.

Here is a link to the CodePen: https://codepen.io/jo_Geek/pen/xgbaEr

and the code itself:

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

.nav>.nav-header {
  display: inline;
}

.nav>.nav-header>.nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav>.nav-btn {
  display: none;
}

.nav>.nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav>.nav-links>a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav>.nav-links>a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav>#nav-check {
  display: none;
}

@media (max-width:600px) {
  .nav>.nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav>.nav-btn>label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav>.nav-btn>label:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav>.nav-btn>label>span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav>.nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav>.nav-links>a {
    display: block;
    width: 100%;
  }
  .nav>#nav-check:not(:checked)+.nav-links {
    height: 0px;
  }
  .nav>#nav-check:checked+.nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}
<div class="nav">
  <div class="nav-header">
    <div class="nav-title">
      JoGeek
    </div>
  </div>
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  <input type="checkbox" id="nav-check">
  <div class="nav-links">
    <a href="//github.io/jo_geek" target="_blank">Github</a>
    <a href="http://stackoverflow.com/users/4084003/" target="_blank">Stackoverflow</a>
    <a href="https://in.linkedin.com/in/jonesvinothjoseph" target="_blank">LinkedIn</a>
    <a href="https://codepen.io/jo_Geek/" target="_blank">Codepen</a>
    <a href="https://jsfiddle.net/user/jo_Geek/" target="_blank">JsFiddle</a>
  </div>
</div>


回答1:

You have to use

@media (min-width: 320px) and (max-width: 786px) {

//CSS

}
  • 发表于 2019-03-17 06:55
  • 阅读 ( 98 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除