爲移動第一設計重新設計

Question

在學習移動優先設計之前，我已經設計了一個網頁。

創建響應式設計時，我製作了3個類：.mobile，.tablet，.desktop。

我打電話給我的導航欄中的所有這些類，但顯然不需要在設計移動設備時首先調用我的移動查詢（我明白爲什麼）。每當我刪除我的.mobile類時，它會顯示移動信息，然後當我將窗口重新調整到更大的窗口時，移動信息會保留，然後添加平板電腦/桌面信息。我會如何正確地重新設計呢？ 這是我調整窗口大小時工作表單中的主要內容。

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

所以，我已經成功地回答一半我的問題至今。一開始我對我的導航欄：

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

，現在是：

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

因爲我改變了我的.desktop查詢

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

我的手機和平板電腦的信息是在在這種情況下也是如此，這一部分唯一的變化就是視覺上的變化，所以我改變了我的桌面查詢以包含視覺變化，而不是使用li作爲一組變更，使用ul作爲另一組變更。

爲了隱藏內容和顯示內容，我保留了類並刪除了我的移動查詢。我仍然保留.mobile類。我在我的平板電腦/桌面類上添加了display：none，以便它們永遠不會顯示，但隨後通過我的平板電腦/桌面查詢顯示：block，因此根據視口大小阻止無顯示的顯示。

示例：如果我的屏幕大小爲500像素，則它將被歸類爲桌面視口，因此我的查詢會告訴我的HTML隱藏我的.mobile和.tablet類，而此類平板電腦類已被隱藏。它還告訴我的HTML阻止previos顯示命令到我的.desktop類，這是隱藏它，所以它最終顯示它。我希望這是可以解釋的。