@media 转换画布外导航

Question

一旦屏幕尺寸达到 600 像素的宽度，我正在尝试转换画布外导航。我用一个显示在 600 像素或更小的按钮来切换导航栏。如果您将屏幕大小调整为超过 600 像素的宽度，然后在调整屏幕大小之前已经打开导航，我会尝试关闭导航。两个@media 断点中的“.show-nav #site-canvas”子句似乎没有任何作用，我不知道为什么。

这是css

    @media screen and (min-width: 601px)
    {
       .toggle-nav
       {
         display: none;
       }

       #nav
       {
         display: block;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(0);
         transform: translateX(0);
       }
    }

    @media screen and (max-width: 600px)
    {
       .toggle-nav
       {
         display: block;
       }

       #nav
       {
         display: none;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(300px);
         transform: translateX(300px);
       }
    }

    #site-wrapper 
    {
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    #site-canvas 
    {
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-transition: 300ms ease all;
      transition: 300ms ease all;
    }

    #site-menu 
    {
      width: 300px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -320px;
      background: black;
    }

    #site-menu > .nav-pills > li
    {
      padding-left: 15px;
      width: 100%;
      list-style-type: none;
      border-radius: 5px;
      border: 1px solid whitesmoke;
    }

    #site-menu > .nav-pills > a
    {
      display: block;
    }

    .show-nav #site-canvas 
    {
      -webkit-transform: translateX(300px);
      transform: translateX(300px);
    }

Answer 1

更改你的 CSS 顺序试试这个 CSS

    #site-wrapper 
    {
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    #site-canvas 
    {
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-transition: 300ms ease all;
      transition: 300ms ease all;
    }

    #site-menu 
    {
      width: 300px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -320px;
      background: black;
    }

    #site-menu > .nav-pills > li
    {
      padding-left: 15px;
      width: 100%;
      list-style-type: none;
      border-radius: 5px;
      border: 1px solid whitesmoke;
    }

    #site-menu > .nav-pills > a
    {
      display: block;
    }

    .show-nav #site-canvas 
    {
      -webkit-transform: translateX(300px);
      transform: translateX(300px);
    } 
@media screen and (min-width: 601px)
    {
       .toggle-nav
       {
         display: none;
       }

       #nav
       {
         display: block;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(0);
         transform: translateX(0);
       }
    }

    @media screen and (max-width: 600px)
    {
       .toggle-nav
       {
         display: block;
       }

       #nav
       {
         display: none;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(300px);
         transform: translateX(300px);
       }
    }