html - 使隐藏的标题仅出现在较小的屏幕上

Question

所以我有一个网站，当箭头悬停在光标上时会显示标题，但是在移动设备上效果不佳。

我想知道是否可以在较小的设备上显示标题？我可以使用 CSS 隐藏箭头但在页面加载时触发悬停事件吗？

理想情况下，我需要为 480 像素左右的屏幕执行此操作，因为在这些屏幕上，悬停在点击时出现的问题最多。

header是很简单的代码；

     <header id="header" role="banner">
<center id="showHeader">
<img src="http://outside.hobhob.uk/test/img/a.jpg">
      <div class="headwidth">
            <h1 class="logo">
<a href="index.html" title="Outside The Line"><img src="images/logo.png" alt=""></a>
            </h1> 
          <nav id="main-nav">
        <a href="index.html">Work</a>
        <a href="about.html">About</a>
        <a href="testimonials.html">Testimonials</a>
        <a href="contact.html">Contact</a>
        </nav>  

</center> 
    </header>

我的 CSS；

    header .container{
        position:relative !important;
    }
    center#showHeader:hover > .headwidth {
     height: 180px;
     width: 100%;
    }


    .headwidth {
    max-width: 1000px;
    width: 100%;
    position: relative;
    margin:0 auto;
    background-color: #ffffff;
    display: block;
        transition: .7s;
        height: 0px;
        overflow: hidden;
}

Website Example

Answer 1

[编辑]

以下代码将解决您的问题:

@media screen and (max-width: 480px) {
  .headwidth {
    height: 180px;
  }
}

看看这个 fiddle用于视觉表示(尝试将屏幕推到小于 480px 的宽度)。

片段:

header .container {
  position: relative !important;
}

center#showHeader:hover > .headwidth {
  height: 180px;
  width: 100%;
}

.headwidth {
  max-width: 1000px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  background-color: #ffffff;
  display: block;
  transition: .7s;
  height: 0px;
  overflow: hidden;
}

@media screen and (max-width: 480px) {
  .headwidth {
    height: 180px;
  }
}

<header id="header" role="banner">
  <center id="showHeader">
    <img src="http://outside.hobhob.uk/test/img/a.jpg">
    <div class="headwidth">
      <h1 class="logo">
<a href="index.html" title="Outside The Line"><img src="images/logo.png" alt=""></a>
            </h1>
      <nav id="main-nav">
        <a href="index.html">Work</a>
        <a href="about.html">About</a>
        <a href="testimonials.html">Testimonials</a>
        <a href="contact.html">Contact</a>
      </nav>
    </div>
  </center>
</header>

---

[初始答案]

您可以在 CSS 中使用 @media 查询来使您的网站具有可扩展性和响应性。 有很多方法可以使用媒体查询，但我喜欢这样使用它们:

.element {
    /* The code to be used for this element in general */
}

@media screen and (min-width: 1300px) {
    .element {
        /* The code to be used for this element in devices wider than 1300px */
    }
}

以上示例可以根据用户设备屏幕的最小宽度以不同的尺寸显示不同的内容。

请务必查看这些页面以获取与正确使用媒体查询相关的信息以及易于理解的示例:

• > Mozilla Development Network
• > CSS Tricks
• > W3 Schools