文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

# 解决移动端 Media Query 不生效问题：一份详细教程

花韻仙語
发布： 2025-08-16 21:42:23
原创
897人浏览过

# 解决移动端 Media Query 不生效问题：一份详细教程

本文旨在解决 WordPress 网站首页 Banner 在移动端 Media Query 不生效的问题。通过分析问题代码，找出 `.mobile-img` 元素 `display: none;` 属性未被覆盖的原因，并提供正确的 Media Query 写法，最终实现 Banner 在不同设备上的适配显示。同时，本文也提供了一些 Media Query 编写的建议，帮助开发者编写更简洁高效的样式代码。 ## Media Query 的正确使用方法 Media Query 是 CSS3 提供的一项强大特性，允许开发者根据设备的特性（如屏幕宽度、设备类型、分辨率等）应用不同的样式规则，从而实现响应式设计。当 Media Query 的条件满足时，其内部定义的样式规则将会覆盖原有的样式规则。 ### 问题分析与解决 在提供的代码中，移动端 Banner 不显示的原因在于，虽然对 `.homepage-header-section-content` 和 `.homepage-header-section-image` 进行了 Media Query 设置，但并没有针对 `.desktop-img` 和 `.mobile-img` 元素的 `display` 属性进行修改。因此，`.mobile-img` 元素始终保持 `display: none;` 的状态，导致在移动端无法显示。 要解决这个问题，需要在 Media Query 中添加针对 `.desktop-img` 和 `.mobile-img` 元素的 `display` 属性设置： ```css @media screen and (max-width: 768px) { .homepage-header-section-image { margin-left: 0; } .homepage-header-section-content { left: 0; position: relative; width: 100%; display: block; } .desktop-img { display: none; } .mobile-img { display: block; } }

这段代码表示，当屏幕宽度小于等于 768px 时，.desktop-img 元素的 display 属性设置为 none，.mobile-img 元素的 display 属性设置为 block，从而实现移动端显示移动端 banner，隐藏桌面端 banner。

代码优化

为了使代码更简洁，可以将具有相同 Media Query 条件的样式规则合并到一个 @media 块中。因此，可以将原代码中的两个 @media screen and (max-width: 768px) 合并为一个：

@media screen and (max-width: 768px) {
  .homepage-header-section-image {
    margin-left: 0;
  }

  .homepage-header-section-content {
    left: 0;
    position: relative;
    width: 100%;
    display: block;
  }

  .desktop-img {
    display: none;
  }

  .mobile-img {
    display: block;
  }
}
登录后复制

完整代码示例

以下是修改后的完整代码示例：

<html>
  <head>
    <style type="text/css">
      .homepage-header-section {
        position: relative;
      }

      .banner-main-text {
        width: 100%;
      }

      .homepage-header-section-image img {
        min-width: 100%;
        max-width: 100%;
      }

      .desktop-img {
        display: block;
      }

      .mobile-img {
        display: none;
      }

      .homepage-header-section-content {
        left: 10%;
        width: 35%;
        height: 100%;
        top: 114;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
      }

      .banner-cta-row {
        padding-top: 2rem;
      }

      .shop-gifts-banner-cta {
        padding-right: 10px;
      }

      .shop-gifts-banner-cta a,
      .corporate-gifts-banner-cta a {
        border-radius: 2rem;
      }

      .shop-gifts-banner-cta .btn:hover {
        background-color: #cea67e;
      }

      @media screen and (max-width: 768px) {
        .homepage-header-section-image {
          margin-left: 0;
        }

        .homepage-header-section-content {
          left: 0;
          position: relative;
          width: 100%;
          display: block;
        }

        .desktop-img {
          display: none;
        }

        .mobile-img {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <div class="homepage-header-section">
      <div class="homepage-header-section-image">
        <img
          src="img\PwP_May2022_Banner.jpg"
          class="desktop-img"
          alt="May Banner Desktop"
        />
        <img
          src="img\PwP_May2022_Banner_mobile.jpg"
          class="mobile-img"
          alt="May Banner Mobile"
        />
      </div>
      <div class="homepage-header-section-content">
        <div class="banner-main-text">
          <svg
            id="Layer_2"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 626.03 244.21"
          >
            <defs><style>.cls-1 {
              fill: #fff;
            }</style></defs>
            <g id="Layer_1-2">
              <g>
                <g>
                  <path
                    class="cls-1"
                    d="M28.16,.58h22.88V6.7h-14.65V26.24h11.88v5.83h-11.88v21.64h14.79v5.9H28.16V.58Z"
                  />
                  <path
                    class="cls-1"
                    d="M70.5,28.71L58.4,.58h7.65l8.96,20.84L83.18,.58h7.65l-12.39,28.79,12.97,30.24h-7.65l-9.62-22.23-8.31,22.23h-7.65l12.32-30.9Z"
                  />
                  <path
                    class="cls-1"
                    d="M99.87,40.67V19.82C99.87,7.87,103.23,.07,115.76,.07c11,0,14.87,6.34,14.87,16.98v4.66h-7.8v-4.15c0-6.56-.15-11.08-7-11.08s-7.65,4.81-7.65,12.1v23.39c0,8.89,1.97,11.81,7.65,11.81,6.63,0,7-4.74,7-11.73v-4.37h7.8v4.37c0,10.86-3.28,18.22-14.87,18.22-12.53,0-15.89-8.6-15.89-19.6Z"
                  />
                  <path
                    class="cls-1"
                    d="M142.51,.58h22.88V6.7h-14.65V26.24h11.88v5.83h-11.88v21.64h14.79v5.9h-23.03V.58Z"
                  />
                  <path
                    class="cls-1"
                    d="M176.18,.58h14.65c10.57,0,14.58,6.05,14.58,16.32,0,9.4-4.88,15.23-14.5,15.23h-6.49v27.47h-8.23V.58Zm12.02,25.65c7.07,0,9.4-1.97,9.4-9.26,0-8.38-1.09-10.49-9.33-10.49h-3.86V26.24h3.79Z"
                  />
                  <path
                    class="cls-1"
                    d="M221.65,6.7h-9.98V.58h27.91V6.7h-9.69V59.61h-8.23V6.7Z"
                  />
                  <path class="cls-1" d="M249.71,.58h8.09V59.61h-8.09V.58Z" />
                  <path
                    class="cls-1"
                    d="M270.26,41.1V18.73c0-11.66,4.23-18.66,16.18-18.66s16.11,7.07,16.11,18.66v22.45c0,11.59-4.23,19.09-16.11,19.09s-16.18-7.43-16.18-19.17Zm23.98,1.82V17.05c0-6.56-1.24-10.57-7.8-10.57s-7.87,4.01-7.87,10.57v25.87c0,6.56,1.24,10.86,7.87,10.86s7.8-4.3,7.8-10.86Z"
                  />
                  <path
                    class="cls-1"
                    d="M314.65,.58h5.61l16.76,39.21V.58h6.85V59.61h-5.25l-16.98-40.3V59.61h-7V.58Z"
                  />
                  <path
                    class="cls-1"
                    d="M366.47,.58h7.94l12.61,59.03h-7.8l-2.7-14.87h-12.02l-2.84,14.87h-7.72L366.47,.58Zm8.96,38.26l-4.96-26.6-4.88,26.6h9.84Z"
                  />
                  <path class="cls-1" d="M397,.58h8.23V53.71h15.09v5.9h-23.32V.58Z" />
                  <path
                    class="cls-1"
                    d="M448.16,41.61V18.58c0-11.3,3.13-18.58,14.94-18.58,10.57,0,14.28,6.12,14.28,16.98v2.04h-5.25v-2.04c0-8.31-1.75-12.53-8.96-12.53-8.16,0-9.4,5.68-9.4,13.55v24.27c0,8.6,1.82,13.63,9.47,13.63s9.26-5.03,9.26-13.77v-6.92h-8.75v-4.15h13.85v28.57h-3.57l-.66-6.71c-1.53,4.52-4.59,7.51-10.64,7.51-11.22,0-14.58-7.51-14.58-18.8Z"
                  />
                  <path class="cls-1" d="M490.29,.58h5.54V59.61h-5.54V.58Z" />
                  <path
                    class="cls-1"
                    d="M509.23,.58h21.21V4.74h-15.67V26.96h13.04v4.08h-13.04v28.57h-5.54V.58Z"
                  />
                  <path
                    class="cls-1"
                    d="M547.57,4.88h-11.15V.58h27.55V4.88h-10.86V59.61h-5.54V4.88Z"
                  />
                  <path
                    class="cls-1"
                    d="M571.18,44.31l4.88-1.46c.8,7.29,2.7,12.97,9.91,12.97,5.25,0,8.31-2.55,8.31-8.53,0-5.25-2.77-8.53-7.21-12.75l-10.42-9.98c-3.79-3.57-5.39-7.29-5.39-11.88,0-8.16,5.32-12.68,13.34-12.68,8.53,0,13.34,4.08,14.14,14.94l-4.74,1.24c-.58-7.43-2.62-11.81-9.4-11.81-4.88,0-8.31,2.48-8.31,7.8,0,3.21,1.09,5.68,4.15,8.6l10.42,9.84c4.59,4.37,8.6,9.62,8.6,16.32,0,8.82-5.61,13.41-13.55,13.41-9.62,0-14.06-6.41-14.72-16.03Z"
                  />
                </g>
                <g>
                  <path
                    class="cls-1"
                    d="M57.52,176.63h-1.95c.39-1.89,.59-3.71,.59-5.47,0-3.91-1.21-7.01-3.61-9.33-2.41-2.31-5.86-3.47-10.35-3.47-3.52,0-6.36,.88-8.54,2.64-2.18,1.76-3.27,4.43-3.27,8.01,0,3,.89,5.81,2.69,8.45,1.79,2.64,4.51,5.91,8.15,9.81,2.73,2.87,4.88,5.27,6.44,7.23s2.9,4.1,4,6.44c1.11,2.34,1.66,4.82,1.66,7.42,0,4.36-1.4,8.01-4.2,10.94-2.8,2.93-6.27,5.09-10.4,6.49-4.13,1.4-8.25,2.1-12.35,2.1s-7.39-.36-9.67-1.07c-2.28-.72-4.69-1.86-7.23-3.42-1.43-.98-2.57-1.46-3.42-1.46s-1.51,.34-2,1.03-1.19,2.1-2.1,4.25H0c1.04-2.47,2.07-5.45,3.08-8.94,1.01-3.48,2.2-8.32,3.56-14.5h1.95c-.59,2.48-.88,4.79-.88,6.93,0,4.88,1.35,8.61,4.05,11.18,2.7,2.57,6.66,3.86,11.86,3.86,8.4,0,12.6-3.42,12.6-10.25,0-3.65-.86-6.92-2.59-9.81-1.73-2.9-4.31-6.23-7.76-10.01-2.34-2.67-4.2-4.9-5.57-6.69-1.37-1.79-2.52-3.82-3.47-6.1-.94-2.28-1.42-4.72-1.42-7.32,0-4.17,1.19-7.73,3.56-10.69,2.38-2.96,5.42-5.17,9.13-6.64,3.71-1.46,7.49-2.2,11.33-2.2,3.38,0,6.28,.39,8.69,1.17,2.41,.78,4.65,1.82,6.74,3.12,1.69,1.04,2.77,1.56,3.22,1.56,.52,0,1.03-.41,1.51-1.22,.49-.81,1.06-2.13,1.71-3.96h1.95c-2.47,6.25-4.39,12.89-5.76,19.92Z"
                  />
                  <path
                    class="cls-1"
                    d="M65.86,195.09c2.44-5.79,6.05-10.64,10.84-14.55,4.79-3.91,10.5-5.86,17.14-5.86,5.08,0,8.98,1.38,11.72,4.15,2.73,2.77,4.1,6.75,4.1,11.96s-1.22,10.91-3.66,16.7c-2.44,5.79-6.05,10.64-10.84,14.55-4.78,3.91-10.5,5.86-17.14,5.86-5.08,0-8.98-1.38-11.72-4.15-2.73-2.77-4.1-6.75-4.1-11.96s1.22-10.9,3.66-16.7Zm19.58-11.52c-2.87,4.62-5.27,10.29-7.23,16.99-1.95,6.71-2.93,12.96-2.93,18.75,0,2.34,.26,4.04,.78,5.08,.52,1.04,1.37,1.56,2.54,1.56,2.41,0,5.03-2.25,7.86-6.74,2.83-4.49,5.22-10.07,7.18-16.75,1.95-6.67,2.93-13,2.93-18.99,0-2.54-.26-4.31-.78-5.32-.52-1.01-1.33-1.51-2.44-1.51-2.41,0-5.05,2.31-7.91,6.93Z"
                  />
                  <path
                    class="cls-1"
                    d="M139.3,181.86c-3.03,3.48-5.49,8.04-7.37,13.67-1.89,5.63-2.83,11.41-2.83,17.33,0,6.51,2.47,9.76,7.42,9.76,4.69,0,8.98-2.86,12.89-8.59l1.95,.78c-2.34,3.78-5.32,6.9-8.94,9.37-3.61,2.47-7.73,3.71-12.35,3.71s-8.54-1.27-11.38-3.81c-2.83-2.54-4.25-6.28-4.25-11.23,0-5.6,1.4-11.38,4.2-17.33,2.8-5.96,6.74-10.92,11.82-14.89,5.08-3.97,10.84-5.96,17.
登录后复制

以上就是# 解决移动端 Media Query 不生效问题：一份详细教程的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
css wordpress ai css css3 display position margin WordPress
来源：php中文网
收藏 点赞
上一篇：HTML表单如何添加搜索框？search类型的input怎么用？ 下一篇：HTML如何设置表单周选择？input type="week"的用法是什么？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
使用 CSS 媒体查询实现响应式布局：根据屏幕尺寸动态修改样式 本教程旨在帮助开发者利用CSS媒体查询，根据不同的屏幕尺寸应用不同的样式规则，从而实现响应式布局。我们将介绍媒体查询的基本语法和常用特性，并通过示例代码演示如何在网页中根据屏幕宽度动态修改元素的CSS属性，从而创建适应各种设备的网页。
2025-08-24 22:14:01
488
利用按钮点击动态更新JavaScript变量数据教程 本教程将指导您如何在前端开发中，通过JavaScript和HTML按钮实现变量数据的动态更新。我们将探讨常见的代码陷阱，如脚本加载、变量声明和条件判断的正确用法，并提供符合现代Web开发规范的优化解决方案，确保代码的健壮性和可维护性。
2025-08-24 22:12:57
168
使用按钮点击事件动态修改变量数据 本文旨在帮助开发者理解如何通过按钮点击事件来动态修改JavaScript变量中的数据。文章将详细讲解如何正确地绑定事件、获取按钮ID，以及如何使用条件判断语句来更新变量值。同时，文章还会强调一些常见的错误，例如变量声明方式和比较运算符的使用，并提供经过修正的代码示例，确保读者能够正确地实现所需功能。
2025-08-24 22:08:01
497
JavaScript中动态更新数组数据：按钮点击事件与最佳实践 本文详细介绍了如何利用JavaScript按钮点击事件动态更新页面中的数组数据。通过修正常见的代码错误，如脚本位置、变量声明方式以及比较运算符的正确使用，本教程提供了一套清晰且符合现代Web开发规范的解决方案，旨在帮助开发者高效实现交互式数据展示。
2025-08-24 21:44:01
136
通过按钮点击事件动态修改变量数据 本文旨在解决通过HTML按钮点击事件动态修改JavaScript变量数据的问题。文章将详细讲解如何正确地实现这一功能，包括避免常见的错误，使用现代JavaScript语法，以及提供清晰的代码示例。通过阅读本文，你将能够掌握通过按钮点击事件动态更新变量数据的技巧，并将其应用到你的Web开发项目中。
2025-08-24 21:30:21
775
使用 CSS 媒体查询实现响应式布局：动态调整元素样式 本文旨在介绍如何使用CSS媒体查询（MediaQueries）来实现响应式网页设计，即根据屏幕尺寸的变化动态调整页面元素的样式。通过媒体查询，开发者可以针对不同的设备和屏幕尺寸应用不同的CSS规则，从而优化用户在各种设备上的浏览体验。本文将详细讲解媒体查询的语法和用法，并提供示例代码，帮助读者快速掌握这一核心技术。
2025-08-24 21:26:01
696
JavaScript中无限随机颜色生成与应用实践 本文旨在解决在JavaScript应用中生成无限数量随机颜色的需求，避免依赖有限的预定义颜色数组。通过介绍如何利用Math.random()和十六进制转换动态生成唯一的颜色代码，并提供代码示例，确保每个对象都能拥有独一无二的视觉呈现。文章还涵盖了颜色格式完整性保障，以提升代码的健壮性。
2025-08-24 21:02:14
298
解决 Vuetify CSS 导入错误的 Webpack 配置指南 本文旨在解决在使用Webpack构建Vue和Vuetify应用时，导入vuetify.min.css导致Moduleparsefailed:Unexpectedcharacter'@'的错误。核心解决方案涉及为Webpack添加正确的CSS文件加载器配置，并优化Vuetify的初始化和样式引入方式，确保样式能够被正确解析和应用。
2025-08-24 20:54:01
956
解决Webpack中Vuetify样式加载错误的详细教程 本教程旨在解决在使用Webpack构建Vue和Vuetify应用时，Vuetify样式（vuetify.min.css）加载失败的问题。核心解决方案包括调整Vuetify版本、在Webpack配置中添加针对.css文件的loader规则，以及优化Vuetify的初始化方式，确保样式能够被正确解析和应用，从而实现Vuetify组件的正常显示。
2025-08-24 20:46:01
276
解决Webpack中Vuetify CSS导入错误：配置加载器与优化初始化 本教程旨在解决在使用Webpack构建Vue和Vuetify应用时，导入vuetify.min.css文件可能遇到的“Moduleparsefailed”错误。文章将详细指导如何通过配置Webpack的CSS加载器、管理Vuetify版本以及优化初始化流程来彻底解决此问题，确保Vuetify样式正确加载。
2025-08-24 20:38:01
428
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部