“This is the 11th day of my participation in the Gwen Challenge.

Responsive layout: A page has different responses when the screen size is different. For example, in the previous case of “two-column three-column layout”, when the screen width is larger than 800px, the page is divided into three left, middle and right sections. When the screen width is smaller than 800px, the left list becomes the upper navigation bar

The width of the screen is different, but it’s not going to be completely different, it’s just going to be a little bit different, some properties are going to be different, so we need to think about, what properties are we going to use, how are we going to write it, so that we can easily convert it into two layouts

Case problem record:

Question 1:

When the screen is full width, li looks very close to the edge, so use max-width. When the screen is large, it is 980px and centered at 980px in the middle of the screen. The gap between Li adaptively shrinks

Do not set the width bymargin: 0 auto;controlliIn the middle:



Set max-width andmargin: 0 auto;Control the980 px.The center of

Question 2:

If there is no jump link set in the A TAB, the page will refresh after clicking, and the screen will flash for a while. Not if you have the href, “javaScript:;”

Before not preventing refresh: Notice that the refresh symbol in the upper left corner always changes to an ‘X’ sign, i.e., refresh



Add “javaScript:; ‘after:

Problem 3: When the screen is small, click the “=” in the upper right corner to control ul display and hide. If you use JS to judge, and set display,

var gnMore = document.getElementsByClassName('gn-more') [0],
    gnList = document.getElementsByClassName('gn-list') [0];

gnMore.onclick = function(){
    if (gnList.style.display == 'flex'){
        gnList.style.display = 'none';
    }else {
        gnList.style.display = 'flex'; }}Copy the code

Effect:

When the screen is small, click ‘=’ twice, display: None; The effect of the. Gn-more inline style will remain, the screen is enlarged, gn-list is not displayed; Even though gn-list sets display to Flex when the screen is large, the inline styles have the largest weight and override dislay’s Settings in the external styles:



So, instead of using display to make click-and-hide judgments, use CSS:

Gn-list-activate If. Gn-list has a class name at the same time, gn-list is displayed. Note that there is no space between the two class names

.gn-list.gn-list-activate {
    display: flex;
}
Copy the code
gnMore.onclick = function(){
    // if (gnList.style.display == 'flex'){
    // gnList.style.display = 'none';
    // }else {
    // gnList.style.display = 'flex';
    // }
    if (document.getElementsByClassName('gn-list-activate') [0]){
        gnList.classList.remove('gn-list-activate');
    }else{
        gnList.classList.add('gn-list-activate'); }}Copy the code



Debug panel knowledge record:



If you press F12 on this part of the debug panel, the higher the weight is, the bigger the weight is. If you press ‘=’ and add ‘GN-liat-activate’ to the class name, you can see that the gn-list is set to Flex, and the next line display: None; Is not effective because the weight is not as large as the previous one

Performance considerations record: Gn-list-activate activate activates gn-list Bootsrap activate activate activates gn-List Bootsrap activate activate activates gn-List Bootsrap activate activate activates gn-List Bootsrap activate activate activates gn-List Bootsrap Gn-list-activate will not affect user experience. If gn-list is not recalled and the screen is enlarged, gn-list-activate will be cancelled, and the window size needs to be monitored, which consumes performance and is generally not monitored

Navigation bar complete code:

<body>
    <div class="gn-globalnav">
        <div class="gn-content">
            <ul class="gn-header">
                <li class="gn-logo">
                    <a href=""></a>
                </li>
                <li class="gn-more"><a href="javaScript:;">=</a></li>
            </ul>
            <ul class="gn-list">
                <li>
                    <a href="">AAAA</a>
                </li>
                <li>
                    <a href="">BBBB</a>
                </li>
                <li class="gn-logo">
                    <a href=""></a>
                    <! -- <img src="./img/img.png" alt=""> -->
                </li>
                <li>
                    <a href="">CCCC</a>
                </li>
                <li>
                    <a href="">DDDD</a>
                </li>
                
            </ul>
        </div>
    </div>
    <script src="./JS/index.js"></script>
</body>
Copy the code
body.ul.li.a.p {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
a.p {
    color: red;
}

.gn-globalnav{
    height: 44px;
    background-color: rgba(0.0.0.0.8);
}

.gn-content {
    /* width: 980px; * /
    max-width: 980px;
    margin: 0 auto;
}

.gn-header {
    display: none;
}

.gn-list..gn-header {
    height: 44px;
    display: flex;
    justify-content: space-between;
    margin:0 30px;
}
.gn-list li..gn-header li {
    height: 44px;
}
.gn-list li a..gn-header li a {
    display: inline-block;
    height: 44px;
    line-height: 44px;
}


.gn-logo a {
    background-image: url(../img/img.png);
    width: 62px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}
.gn-header {
    display: none;
}
.gn-header .gn-more {
    font-size: 30px;
}
.gn-list.gn-list-activate {
    display: flex;
}

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

    .gn-list {
        display: none;
        position: absolute;
        top:44px;
        flex-direction: column;
        height: auto;
        margin: 0;
        width: 100%;
        background:# 222;
    }
    .gn-list .gn-logo {
        display: none;
    }
    .gn-list li {
        width: 80%;
        margin:0 auto;
        border-top: 1px solid # 555;
    }
    .gn-list li:first-child {
        border-top: none;
    }
    .gn-header {
        display: flex; }}Copy the code
var gnMore = document.getElementsByClassName('gn-more') [0],
    gnList = document.getElementsByClassName('gn-list') [0];

gnMore.onclick = function(){
    if (document.getElementsByClassName('gn-list-activate') [0]){
        gnList.classList.remove('gn-list-activate');
    }else{
        gnList.classList.add('gn-list-activate'); }}Copy the code

In addition to the navigation bar, there is a content main section:

    <div class="main">
        <div class="main-content">
            <p>I am the AAAA</p>
            <p>I am a BBBB</p>
            <p>I am a CCCC</p>
            <p>I am a DDDD</p>
        </div>
    </div>
Copy the code
.main {
    position: relative;
    background:black;
    height: 850px;
    display: flex;
    justify-content: center;
}
.main .main-content {
    position: absolute;
    top: 80px;
}

.main .main-content p {
    height: 200px;
    font-size: 20px;
    width: 40%;
    line-height: 200px;
    text-align: center;
    border-top: 1px solid gray;
    box-sizing: border-box;
}
.main .main-content p:nth-child(2n-1) {float: left;
}
.main .main-content p:nth-child(2n){
    float: right;
}

.main .main-content::after {
    content: ' ';
    display: block;
    clear: both;
}

@media only screen and (max-width:700px) {
    .main .main-content {
        width: 80%;
    }
    .main .main-content p {
        font-size: 14px;
        height: 120px;
        width: 100%;
        line-height: 120px; }}Copy the code

Add z-index to gn-list, add gn-list to top display when ‘=’ :

Effect: