@media

We use @Media to achieve responsive pages by defining different layouts for different sizes of pages.

Simple application

  <style>
      @media screen and (max-width: 375px) {.wrap{
              background: red; }}@media screen and (min-width: 376px) {.wrap{
              background: blue; }}@media screen and (min-width: 980px) {.wrap{
              background: green; }}div{
          width: 100%;
          height: 500px;
      }
  </style>
  <div class="wrap">
  </div>
Copy the code

Wrap shows red when the screen size is less than 375px; When the screen size is larger than 375px, the screen appears blue. It turns green when the screen size is greater than 980px.

An adaptive gold digger navigation bar



Here’s how it works: When the screen size is smaller than we want it to be (say, 580px), rearrange the layout of the header: the More button appears and the navigation content is hidden. When the More button is clicked, the Checked of the checkbox is triggered to make the hidden navigation content appear.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="container">
        <div class="nav">
            <p class="title">The Denver nuggets</p>
            <div class="toggle-wrap">
                <label for="toggle-nav">
                    <span class="more">More</span>
                </label>
            </div>
            <input type="checkbox" id="toggle-nav">
            <div class="wrap">
                <ul class="label-wrap">
                    <li class="label">recommended</li>
                    <li class="label">The back-end</li>
                    <li class="label">The front end</li>
                    <li class="label">Android</li>
                    <li class="label">iOS</li>
                </ul>
                <div class="btn-wrap">
                    <span class="btn">Write an article</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Copy the code
* {margin: 0;
    padding: 0;
}
body{
    background-color: #f4f5f5;
}
.container{
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #f1f1f1;
    color: # 909090;
}
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
}
ul {
    list-style: none;
}
.title{
    color:  #0876e4;
    margin-right: 30px;
    font-size: 24px;
    height: 60px;
    line-height: 60px;
}
.wrap{
    flex-grow: 1;
    display: flex;
}
.label-wrap{
    display: flex;
    margin-right: auto;
}
.label{
    cursor: pointer;
}
.label:hover{
    color: #0876e4;
}
.label+.label{
    margin-left: 20px;
}
.btn{
    background-color: #0876e4;
    color: white;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
}
.toggle-wrap{
    display: none;
}

#toggle-nav{
    display: none;
}
@media only screen and (max-width: 580px) {.toggle-wrap{
        display: block;
    }
    .title{
        margin-right: auto;
    }
    .nav{
        flex-wrap: wrap;
    }
    .wrap{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .label-wrap{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
    }
    .label{
        height: 35px;
        line-height: 35px;
    }
    .label+.label{
        margin-left: 0px;
    }
    .btn-wrap{
        margin:10px 0px 20px 0px;
    }
    .wrap{
        display: none;
    }
    #toggle-nav:checked + .wrap{
        display: block;
    }
    .more{
        cursor: pointer;
    }
    .more:hover{
        color: #0876e4; }}Copy the code

GitHub:github.com/YY88Xu/medi…