Question

在学习移动优先设计之前，我已经设计了一个网页。

在创建响应式设计时，我创建了3个类：.mobile，.tablet，.desktop。

我在导航栏中调用了所有这些类，但显然在设计移动设备时不需要调用我的移动查询（我理解为什么）。每当我删除我的.mobile类时，它会显示移动信息，然后当我将窗口调整到更大的窗口时，移动信息会保留，然后添加平板电脑/桌面信息。我将如何正确地重新设计这个？这是我在调整窗口大小时的工作形式的主要内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

所以到目前为止我已经设法回答了我的一半问题。一开始我的Nav栏就是：

<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阻止我的.desktop类的previos显示命令，这是隐藏它，所以它最终显示它。我希望这甚至可以解释。

重新设计移动优先设计

1 个答案: