Question

正如标题所述，我试图添加仅在移动视图中可见的文本。该文本将取代我的徽标。我使用此代码：

CSS：

＆＃13;

<td>
    <md-input-container>
        <input mdInput [(ngModel)]="details.firstName" placeholder="First name(s)" ng-pattern="/^[a-zA-Z\s]*$/">
    </md-input-container>
</td>

＆＃13;

@media only screen and (max-width:1024px) {
  header .logo {
    display: none;
  }
  header .logo a {
    display: none;
  }
}

@media only screen and (max-width:768px) {
  header .logo {
    display: none;
  }
  header .logo a {
    display: none;
  }
}

@media only screen and (max-width:600px) {
  header .logo {
    display: none;
  }
  header .logo a {
    display: none;
  }
}

@media only screen and (max-width:400px) {
  header .logo {
    display: none;
  }
  header .logo a {
    display: none;
  }
}

.mobileShow {
  display: none;
}


/* Smartphone Portrait and Landscape */

@media only screen and (max-device-width: 768px) and (max-device-width: 600px) and (max-device-width: 400px) {
  .mobileShow {
    display: inline-block;
    top: 40px;
    left: 0px;
    right: 0px;
  }
}

＆＃13;

这是该网站的移动视图： http://mobt.me/Zgly

这是该网站的常规视图： http://imgur.com/3GgxNqO

正如您所看到的，仅限移动设备的文字＆＃34; Game Ware＆＃34;不可见。但在普通视图中可以看到仅限移动设备的文本。我希望它仅在移动视图中可见并隐藏在普通视图中。

感谢帮助！我在这里做错了什么？

Answer 1

使用bootstrap提供的hidden-sm hidden-xs hidden-md hidden-lg类隐藏基于屏幕分辨率的标签，根据小型中大屏幕隐藏内容。

<header class="main-header">
    <div class="row">
        <div class="logo animated bounce hidden-sm hidden-xs">
             <a>Game Ware</a>
          </div>           
        <div class="mobileShow hidden-md hidden-lg">
             <h1 style="text-align: center; font-size: 40px;">GAME WARE</h1>
    </div>
</div>
   </header>

Answer 2

<header class="main-header">
   <div class="row">
        <div class="logo animated bounce visible-sm visible-md visible-lg">
             <a>Game Ware</a>
        </div>

        <div class="mobileShow visible-xs">
        <h1 style="text-align: center; font-size: 40px;">GAME WARE</h1>
        </div>
    </div>
</header>

我想隐藏我当前的图像＆amp;将其替换为移动视图中的文本

2 个答案: