为什么媒体查询在 Blogger 中不起作用？答案

【问题标题】：Why media Queries Not Working in Blogger?为什么媒体查询在 Blogger 中不起作用？
【发布时间】：2022-11-26 20:26:18
【问题描述】：

我一直在尝试在 blogger 上创建一个响应式博客。但是我对标题部分感到震惊。

媒体查询不工作，因此我无法在标题中使用菜单功能。我已将菜单图标设置为 display:none 外部媒体查询和媒体查询 display:block

但是媒体查询无法显示菜单图标。

HTML

<div class="container">
<span class="menu-icon"><i class="fa-solid fa-bars"></i></span>
<div class="header section" id="header" name="Header">
<div class="widget Header" data-version="1" id="Header1">
   <div id="header-inner">
      <div class="titlewrapper">
         <h1 class="title">
            learn.dev
         </h1>
      </div>
      <div class="descriptionwrapper">
         <p class="description"><span>Learning Themes Development</span></p>
      </div>
   </div>
</div>
<div class="widget LinkList" data-version="1" id="LinkList1">
   <h2>Menu</h2>
   <div class="widget-content">
      <ul>
         <li><a href="https://">Home</a></li>
         <li><a href="https://">About</a></li>
         <li><a href="https://">Contact</a></li>
         <li><a href="https://">Disclaimer</a></li>
         <li><a href="https://">Privacy</a></li>
      </ul>
   </div>
</div>

CSS

.menu-icon {
font-size: 20px;
display: none;
margin-left : 21px;
margin-right : 21px;
cursor : pointer;
)

@media only screen and (max-width:700px) {
    .menu-icon {
        display: block;
    }

}

【问题讨论】：

你的html在哪里？请粘贴足够的代码让其他人重现问题。
请提供足够的代码，以便其他人可以更好地理解或重现问题。
我添加了html代码

标签： html css blogger

【解决方案1】：

您的 CSS 代码中似乎有一个小错误。

    <style>
    .menu-icon{
        font-size: 20px;
        display: none;
        margin-left: 21px;
        margin-right: 21px;
        cursor: pointer;

    }
     @media only screen and (max-width:700px) {
            .menu-icon {
                display: block;
            }

        }
</style>

【讨论】：