Question

我最初使用最大宽度媒体查询来设计导航栏。我正在为其设计的代码库使用的是最小宽度。我可以通过编程或逻辑方式更改它们吗？除了重新编写整个样式表

我知道我可以同时使用min和max宽度来创建约束，我只是想知道是否有一种方法可以将一种方法转换为另一种被我忽略的方法。

      <nav class="nav nav-collapse" id="headerSupportedContent">
        <ul class="nav-list">
          <li class="nav-item">
            <a class="nav-link " href="#0">Nav Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link  active-link" href="#0">Active Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled-link" href="#0">Disabled</a>
          </li>
        </ul>
      </nav>

.nav {
  margin: 0 0 0 auto;
  display: flex;
  justify-content: center;
  height: 3rem; }
  @media (max-width: 1024px) {
    .nav {
      height: 16rem;
      width: 16rem;
      flex-wrap: wrap;
      position: absolute;
      top: 4rem;
      right: 7vw;
      padding: 0;
      transform-origin: top right;
      transform: scale(0);
      transition: transform 0.4s;
      box-shadow: 0 0 5px -2px;
      z-index: 9999; } }

.nav-list {
  list-style-type: none;
  display: flex;
  align-items: center;
  overflow: hidden; }
  @media (max-width: 1024px) {
    .nav-list {
      flex-direction: column;
      padding: 0; } }
  @media (max-width: 568px) {
    .nav-list {
      width: 100%; } }

.nav-item {
  padding: 0.9rem 1.4rem 0.9rem 1.4rem; }
  @media (max-width: 1024px) {
    .nav-item {
      padding: 0;
      margin-right: auto; } }
  @media (max-width: 568px) {
    .nav-item {
      margin: 0 auto; } }

.nav-link {
  color: #c2c2c2;
  letter-spacing: 1px;
  text-decoration: none; }
  .nav-link:hover, .nav-link:active {
    color: #e8e8e8; }
  @media (max-width: 1024px) {
    .nav-link {
      display: block;
      color: #767676;
      padding: 0.9rem 1.4rem 0.9rem 1.4rem; }
      .nav-link:hover, .nav-link:active {
        color: #363636; } }

.navbar-collapse {
  display: none; }
  @media (max-width: 1024px) {
    .navbar-collapse {
      display: block;
      margin: auto 50px auto auto;
      cursor: pointer; } }
  .navbar-collapse-icon {
    font-size: 200%; }

这里是带有更多代码https://tool.cdn.gdms.lge.com/dn/downloader.dev?fileKey=UW00120120425

的小提琴的链接

将最大宽度媒体查询更改为最小宽度

0 个答案: