切换 Phone 视图

Question

我有切换代码，但它没有显示在 phone 视图中。如果我删除 max-width 750px，它就会出现，但这会弄乱排版视图。所以我不能在我现在编写代码的同时让 comp 和 phone 视图都正确。 https://citizenssalon.com

<!-- Header -->
        
<nav class=menu> 

            <nav class=title>CitizensSalon

            <ul class="active">        

        <link href="Policy.html">

        <link href="Writings.html">

         <link href="Projects.html">

        <li><a href="Writings.html">Blog</a></li>

        <li><a href="Policy.html">Policy Proposals</a></li>

        <li><a href="Projects.html">Projects</a></li>

                </ul>

        </nav>

            

        <a class="toggle-nav" href="#">&#9776;</a>

</nav>

CSS代码

/*----- Toggle Button -----*/


.toggle-nav {

    display:none;
  
}

/*----- Comp View Full Screen -----*/

@media screen and (max-width: 1150px) 

{

  .wrap {

    width:90%;

  }

  .title {

      margin-bottom: 5px;

  }
  
}

/*----- Menu -----*/
  
@media screen and (min-width: 950px) {
    
.menu {

      width:100%;

      box-shadow:0px 1px 1px rgba(0,0,0,0.15);

      border-radius:3px;

      background-color:cadetblue;

      border: 10px;


    }

      .salon {

          font-size: 5px;

          margin-bottom: 10px;

      }
      .title {
          
font-size:30px;
      }
  
  .menu ul {

    display:inline-block;

  }



  .menu li {

    margin:0px 50px 0px 0px;

    float:left;

    list-style:none;

    font-size:17px;

    margin-top: 10px;

  }



  .menu li:last-child {

    margin-right:0px;

  }



  .menu a {

    text-shadow:0px 1px 0px rgba(0,0,0,0.5);

    color:black;

    transition:color linear 0.15s;

    font-size:20px;

    

  }



  .menu a:hover .menu .current-item a {

    text-decoration:none;

    color:#66a992;

  }



  @media screen and (max-width: 970px) {

    .search-form input {

      width:120px;

    }

  }



  @media screen and (max-width: 750px) {

      .menu {

      position:relative;

      display:block;

      background-color:cadetblue;

    }



    .menu ul.active {

      display:none;

    }



    .menu ul {

      width:20%;

      position:absolute;

      top:10%;

      right:10px;

      padding:10px 10px;

      box-shadow:0px 1px 1px rgba(0,0,0,0.15);

      border-radius:3px;

      background:aliceblue;

    }



    .menu ul:after {

      width:0px;

      height:0px;

      position:absolute;

      top:0%;

      right:22px;

      content:'';

      transform:translate(0%, -100%);

      border-left:7px solid transparent;

      border-right:7px solid transparent;

      border-bottom:2px solid #303030;

    }



    .menu li {

      margin:5px 0px 5px 0px;

      float:none;

      display:block;

    }



    .menu a {

      display:inline;

    }



    .toggle-nav {

      padding:10px;

      float:none;

      display:inline-block;

      box-shadow:0px 1px 1px rgba(0,0,0,0.15);

      border-radius:3px;

      background:white;

      text-shadow:0px 1px 0px rgba(0,0,0,0.5);

      color:black;

      font-size:30px;

      transition:color linear 0.15s;

    }



    .toggle-nav:hover .toggle-nav .active {

      text-decoration:none;

      color:#66a992;

    }

    .search-form {

      margin:12px 0px 0px 20px;

      float:left;

    }



    .search-form input {

      box-shadow:-1px 1px 2px rgba(0,0,0,0.1);

    }

  }

  .menu {

    text-align: center;

    border-radius: 2px;

}



.title {

    display: inline-block;

    border-top: 5px solid black;

    border-radius: 0px;

    font-size: 5.5rem;

    color:azure;

    font-family:monospace;

}

Answer 1

您忘记用 } 结束您的第一个 @media 声明，所以您所有的 CSS 代码都在 @media screen and (max-width: 1150px)

中

这是固定的 CSS:

/*----- Toggle Button -----*/
.toggle-nav {
  display:none;
}
/*----- Comp View Full Screen -----*/
@media screen and (max-width: 1150px) 
{
  .wrap {
    width:90%;
  }
  .title {
    margin-bottom: 5px;
  }
}
/*----- Menu -----*/
@media screen and (min-width: 950px) {
  .menu {
    width:100%;
    box-shadow:0px 1px 1px rgba(0,0,0,0.15);
    border-radius:3px;
    background-color:cadetblue;
    border: 10px;
  }
  .salon {
    font-size: 5px;
    margin-bottom: 10px;
  }
  .title {
    font-size:30px;
  }
  .menu ul {
    display:inline-block;
  }
  .menu li {
    margin:0px 50px 0px 0px;
    float:left;
    list-style:none;
    font-size:17px;
    margin-top: 10px;
  }
  .menu li:last-child {
    margin-right:0px;
  }
  .menu a {
    text-shadow:0px 1px 0px rgba(0,0,0,0.5);
    color:black;
    transition:color linear 0.15s;
    font-size:20px;
  }
  .menu a:hover .menu .current-item a {
    text-decoration:none;
    color:#66a992;
  }
}
@media screen and (max-width: 970px) {
  .search-form input {
    width:120px;
  }
}
@media screen and (max-width: 750px) {
  .menu {
    position:relative;
    display:block;
    background-color:cadetblue;
  }
  .menu ul.active {
    display:none;
  }
  .menu ul {
    width:20%;
    position:absolute;
    top:10%;
    right:10px;
    padding:10px 10px;
    box-shadow:0px 1px 1px rgba(0,0,0,0.15);
    border-radius:3px;
    background:aliceblue;
  }
  .menu ul:after {
    width:0px;
    height:0px;
    position:absolute;
    top:0%;
    right:22px;
    content:'';
    transform:translate(0%, -100%);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:2px solid #303030;
  }
  .menu li {
    margin:5px 0px 5px 0px;
    float:none;
    display:block;
  }
  .menu a {
    display:inline;
  }
  .toggle-nav {
    padding:10px;
    float:none;
    display:inline-block;
    box-shadow:0px 1px 1px rgba(0,0,0,0.15);
    border-radius:3px;
    background:white;
    text-shadow:0px 1px 0px rgba(0,0,0,0.5);
    color:black;
    font-size:30px;
    transition:color linear 0.15s;
  }
  .toggle-nav:hover .toggle-nav .active {
    text-decoration:none;
    color:#66a992;
  }
  .search-form {
    margin:12px 0px 0px 20px;
    float:left;
  }
  .search-form input {
    box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
  }
}
.menu {
  text-align: center;
  border-radius: 2px;
}
.title {
  display: inline-block;
  border-top: 5px solid black;
  border-radius: 0px;
  font-size: 5.5rem;
  color:azure;
  font-family:monospace;
}

切换 Phone 视图

Toggle for Phone View

css

toggle