Re-design für Mobile First Design

Question

Ich habe bereits eine Webseite entworfen, bevor ich etwas über Mobile-First-Design gelernt habe.

Beim Erstellen eines responsiven Designs habe ich 3 Klassen erstellt: .mobile, .tablet, .desktop.

Ich rufe alle diese Klassen in meiner Navigationsleiste, aber anscheinend nicht zu meiner mobilen Abfrage beim ersten Entwurf für mobile aufrufen (ich verstehe, warum). Jedes Mal, wenn ich meine .mobile-Klasse entferne, werden die mobilen Informationen angezeigt. Wenn ich das Fenster auf ein größeres Fenster umstelle, bleiben die mobilen Informationen erhalten und die Tablet-/Desktop-Informationen werden hinzugefügt. Wie würde ich das richtig gestalten? Dies ist mein Hauptinhalt in Arbeitsform beim Ändern der Fenstergröße.

/*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 habe ich es geschafft, so weit die Hälfte meiner Frage zu beantworten. Am Anfang hatte ich für meine 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> 

und es ist jetzt:

<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> 

Weil ich meine .desktop Abfrage

/*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; 
    } 
} 

geändert

Mein Handy und Tablet-Informationen waren die Dasselbe gilt in diesem Fall, da nur visuelle Änderungen in diesem Abschnitt vorgenommen wurden. Daher habe ich meine Desktopabfrage so geändert, dass sie die visuellen Änderungen enthält, anstatt li für einen Satz von Änderungen und ul für einen anderen zu verwenden.

Zum Ausblenden von Inhalten und Anzeigen von Inhalten habe ich die Klassen behalten und meine mobile Abfrage entfernt. Ich behielt immer noch die .mobile-Klasse. Ich habe display: none zu meinen beiden Tablet/Desktop-Klassen hinzugefügt, so dass sie nie angezeigt werden, aber dann mit meiner tablet/desktop Query, hat sie display: block, so dass sie die none-Anzeige blockiert, je nach Viewport-Größe.

Beispiel: Wenn meine Bildschirmgröße 500 Pixel beträgt, wird es als Desktop-Ansichtsfenster klassifiziert. Daher teilt meine Abfrage meinem HTML-Code mit, meine .mobile- und .tablet-Klasse zu verbergen. Diese Klasse ist bereits ausgeblendet. Außerdem teilt es meinem HTML-Code mit, den Befehl prepreios display für meine .desktop-Klasse zu blockieren, was bedeutet, dass sie ausgeblendet wird, damit sie angezeigt wird. Ich hoffe das ist sogar interpretierbar.