由于移动响应，如何避免重复 HTML 文本答案

【问题标题】：How to avoid duplicating the HTML text because mobile responsive由于移动响应，如何避免重复 HTML 文本
【发布时间】：2017-01-19 06:35:17
【问题描述】：

这是网站的示例代码，

<div class="web">
<br>
<ul class="nav nav-pills nav-stacked">
  <li role="presentation"><a [routerLink]="['/home', {outlets: {router2: 'newsfeed'}}]">News Feed</a></li>
  <li role="presentation"><a [routerLink]="['/home', {outlets: {router2: 'photos'}}]">Photos</a></li>
</ul>
</div>
<div class="mobile">
<br>
<ul class="nav nav-pills">
  <li role="presentation"><a [routerLink]="['/home', {outlets: {router2: 'newsfeed'}}]">News Feed</a></li>
  <li role="presentation"><a [routerLink]="['/home', {outlets: {router2: 'photos'}}]">Photos</a></li>
</ul>
</div>

.web
{
    padding-top: 10%; 
    position: fixed;
}

.mobile
{
    position: fixed;
    background-color: white;
    width: 100%;
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 15px;
}


 @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
       .web
       {
           display: none;
       }
    }

    @media only screen and (min-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
       .mobile
       {
           display: none;
       }
    }

我想知道如何避免这样做？

我的手机和网页样式不同，但内部内容是一样的，如何避免因为响应性而重复我的html。

PS：它是一个 angular2 网站！

【问题讨论】：

您了解@media 查询的工作原理吗？
我刚开始使用它。有点理解逻辑。
这太可爱了！你离得太近了哈哈！所以这个工作的方式是你需要删除重复的 HTML。接下来，在两个@media 查询中添加相同的web 类，并对它们应用不同的样式。它就是这样设计的！

标签： html css angular

【解决方案1】：

不要重复自己，而是使用@media quires 覆盖第一个样式。你可以这样做：

将 !important 放在样式的末尾：例如position: fixed !important（不推荐）
指定您的风格。例如html .div 而不是 div
将@media 代码放在初始代码之后
将您的样式表放在<head></head>中的初始样式表之前（不记得是之前还是之后）

我通过将@media 代码置于初始代码之后来覆盖样式：

.web {
  padding-top: 10%;
  position: fixed;
}

@media only screen and (min-device-width: 481px) {
  /* styles for mobile browsers larger than 480px; (iPhone) */
  .web > ul {
    /* insert .nav-stacked code here */
  }
}

@media only screen and (max-device-width: 480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) */
  .mobile {
    position: fixed;
    background-color: white;
    width: 100%;
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 15px;
  }
}

<div class="web mobile">
  <br>
  <ul class="nav nav-pills">
    <li role="presentation"><a [routerLink]="['/home', {outlets: {router2: 'newsfeed'}}]">News Feed</a>
    </li>
    <li role="presentation"><a [routerLink]="['/home', {outlets: {router2: 'photos'}}]">Photos</a>
    </li>
  </ul>
</div>

更新：这就是完全使用 CSS 的方式。如果你愿意使用 JS，那么还有更优雅的方法。

【讨论】：

你没有注意到，我在上面使用了两个不同的类。一个我使用 nav-stacked 而其他我没有。