Question

以下是该网站的示例代码

<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网站！

Answer 1

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

在样式的最后添加！important：例如position: fixed !important（不推荐）
指定你的风格。例如html .div代替div
在初始代码
将样式表放在<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，那么有更优雅的方法。

如何避免重复HTML文本，因为移动响应

1 个答案: