響應式徽標CSS

Question

我的CSS中有以下內容，以便在徽標的每一側運行美觀的規則：

hr.stylelogo {
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    box-sizing: content-box;
    margin-bottom: 1.5em;
}
hr.stylelogo:after {
    content: url(http://the_image);
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #ffffff;
    color: #8c8b8b;
    font-size: 16px; }

我遇到的問題是我試圖以某種方式使徽標響應，但是無法將目標對准此CSS中的圖像。

在我的header.php文件中，我具有以下內容：

<!-- LOGO BLOCK STARTS HERE -->
  <div id="logo">
<div align="center"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><hr class="stylelogo"></a><br />
</div><!-- end #logo -->
  </div>
<!-- LOGO BLOCK ENDS HERE --><br />

#logo不能用於定位實際的徽標圖像。

任何建議，不勝感激。 HNY！

Answer 1

好，所以我已經解決了這個問題。 我為移動徽標添加了另一個div，設置為在正常模式下不顯示。 徽標會根據適合徽標寬度的媒體調用自行切換：

@media all and (max-width: 32.5em) {
#logo {display: none; }
#mobilelogo{display:block;}
}