Question

一旦屏幕尺寸达到600px的宽度，我试图转换画布导航。我用导航栏切换了一个600px或更低的按钮。我试图让屏幕关闭，如果你将屏幕调整到宽度超过600px然后重新打开如果导航已经打开，然后再调整屏幕大小。＆＃34; .show-nav＃site-canvas＆＃34;两个@media断点中的条款似乎没有做任何事情，我不知道为什么。

这是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);
       }
    }

@media变换画布导航

1 个答案: