重新设计移动优先设计

Question

I have already designed a webpage before learning about mobile-first design.

When creating a responsive design I made 3 classes: .mobile, .tablet, .desktop.

I call to all these classes in my navigation bar, but apparently don't need to call to my mobile query when designing for mobile first (I understand why). Whenever I remove my .mobile class it shows the mobile information, and then when I re-size the window to a larger window the mobile information stays and then the tablet/desktop information is added. How would I go about correctly re-designing this? This is my main content in working form when resizing windows.

 /*Mobile Query*/ @media only screen and (max-width:480px) { .mobile { display: block; } .desktop, .tablet { display: none; } } /*Tablet Query*/ @media only screen and (min-width: 481px) and (max-width:768px) { .tablet { display: block; } .mobile, .desktop { display: none; } } /*Desktop Query*/ @media only screen and (min-width: 769px) { .desktop { display: block; } .mobile, .tablet { display: none; } } 

 <h2 class="mobile">About Me</h2> <p class="mobile">I will not disappoint and I will perform to the best of my ability.</p> <h2 class="tablet">About Me</h2> <p class="tablet"> I am somebody who tries their best not to disappoint. I fear that my disappointment will reflect poorly upon myself and people who are close to me. This is something that motivates me to work hard and not to complain. Currently, I work part-time at a grocery store, run a side business, and go to school more than full time.</p> </article> <h2 class="desktop">Strengths</h2> <p class="desktop">One of my strengths include being very talented at learning or developing new ways to complete objectives. I always enjoy learning about different perspectives, and I believe it is needed to be successful. Another one of my strengths is the ability to see an error and immediately want to correct it rather than ignoring it and leaving somebody else to fix it. I am driven to be the best at anything I do while wanting to help other people and make their jobs easier.</p> 

Answer 1

So I've managed to answer half of my question so far. In the beginning I had for my Nav bar:

<nav>
<div class= "mobile">
    <li><a href="index.html">Home</a></li>
    <li><a href="portfolio.html">About Me</a></li> 
    <li><a href="projects.html">My Projects</a></li> 
    <li><a href="contact.html">Contact Me</a></li>
    <li><a href="education.html">My Education</a></li>
</div>

<div class="tablet">
    <li><a href="index.html">Home</a></li>
    <li><a href="portfolio.html">About Me</a></li> 
    <li><a href="projects.html">My Projects</a></li> 
    <li><a href="contact.html">Contact Me</a></li>
    <li><a href="education.html">My Education</a></li>
</div>

<div class="desktop">
    <ul><a href="index.html">Home</a></ul>
    <ul><a href="portfolio.html">About Me</a></ul> 
    <ul><a href="projects.html">My Projects</a></ul> 
    <ul><a href="contact.html">Contact Me</a></ul>
    <ul><a href="education.html">My Education</a></ul>
</div>
</nav>

and it is now:

<nav>
    <li><a href="index.html">Home</a></li>
    <li><a href="portfolio.html">About Me</a></li> 
    <li><a href="projects.html">My Projects</a></li> 
    <li><a href="contact.html">Contact Me</a></li>
    <li><a href="education.html">My Education</a></li>
</nav>

Because I changed my .desktop query

/*Desktop Query*/
@media only screen and (min-width: 769px) {
    .desktop {
        display: block;
    }
    .mobile, .tablet {
        display: none;
    }
    nav li {
        background-color: #FFA500;
        border-radius: 1em;
        list-style-type: none;
        padding-left: .3em;
        padding-right: .3em;
        margin-left: 1%;
        margin-right: 1%;
        display: inline;
        margin-bottom: 2em;
        font-size: 1.2em;
    }
}

My mobile and tablet information were the same in this case, with the only changes coming to this section being visual changes, so I changed my desktop query to include the visual changes instead of using li for one set of changes and ul for another.

For hiding content and displaying content, I kept the classes and removed my mobile query. I still retained the .mobile class. I added display: none to both my tablet/desktop classes so that they will never be displayed, but then with my tablet/desktop query, it has display: block, so it blocks the none display revealing them depending on viewport size.

Example: If my screensize is 500 pixels, it will classify as a desktop viewport, so my query tells my HTML to hide my .mobile and .tablet class, which tablet class is already hidden. It also tells my HTML to block the previos display command to my .desktop class, which was to hide it, so it ends up showing it. I hope this is even interpretable.