为移动优先设计重新设计

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 ，这样它们就永远不会被显示，但是在我的平板电脑/桌面查询中，它具有 display: 块，因此它会根据视口大小阻止显示它们的 none 显示。

示例：如果我的屏幕尺寸为 500 像素，它将归类为桌面视口，因此我的查询告诉我的 HTML 隐藏我的 .mobile 和 .tablet 类，而哪个平板电脑类已经隐藏。它还告诉我的 HTML 阻止我的 .desktop 类的 previos 显示命令，这是隐藏它，所以它最终显示它。 我希望这甚至可以解释。