如何避免由于移动响应而重复HTML文本

这是网站的示例代码

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

新闻提要
照片




新闻提要
照片

网状物
{
垫面：10%；
位置：固定；
}
可移动的
{
位置：固定；
背景色：白色；
宽度：100%；
z指数：1；
填充顶部：20px；
垫底：20px；
字体大小：15px；
}
@仅介质屏幕和（最大设备宽度：480px）{
/*适用于小于480px的移动浏览器的样式；（iPhone）*/
网状物
{
显示：无；
}
}
@仅介质屏幕和（最小宽度：480px）{
/*适用于小于480px的移动浏览器的样式；（iPhone）*/
可移动的
{
显示：无；
}
}

我想知道如何避免这样做

我的手机和网络有不同的风格，但内部内容是相同的，如何避免仅仅因为响应性而复制我的html

---

PS：这是一个angular2网站

使用@media quires覆盖第一种样式，而不是重复您自己。您可以通过以下方式实现此目的：

• 推杆！样式末尾的重要提示：例如，

  位置：固定！重要信息

  （不推荐）
• 指定您的样式。e、 g.

  html.div

  而不是

  div

• 将@media代码放在初始代码之后
• 将样式表放在
  中的初始样式表之前（不记得是在之前还是之后）

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

.web{
垫面：10%；
位置：固定；
}
@仅介质屏幕和（最小设备宽度：481px）{
/*大于480px的移动浏览器的样式；（iPhone）*/
.web>ul{
/*在此插入.nav堆叠代码*/
}
}
@仅介质屏幕和（最大设备宽度：480px）{
/*适用于小于480px的移动浏览器的样式；（iPhone）*/
.手机{
位置：固定；
背景色：白色；
宽度：100%；
z指数：1；
填充顶部：20px；
垫底：20px；
字体大小：15px；
}
}

新闻提要

照片

您了解

@media

查询是如何工作的吗？我刚刚开始使用它。有点理解逻辑。这太可爱了！你是如此接近哈哈！因此，这样做的方式是您需要删除重复的HTML。接下来，在这两个@media查询中添加相同类别的

web

，并对其应用不同的样式。这就是它的工作原理！你没有注意到，我在上面使用了两个不同的类。一个我使用导航堆叠，另一个我没有。