media-queries 相关问题

媒体查询支持基于媒体类型（例如屏幕和打印）以及媒体功能（例如视口和设备高度和宽度）的条件应用CSS样式。它们是W3C CSS3规范的一部分。

我正在使用媒体查询来提高网站的响应能力。当我单击该图标时，菜单会下降，但是当我再次单击返回时...它不会返回。我的html代码我正在使用媒体查询来提高网站的响应能力。当我单击该图标时，菜单会下降，但是当我再次单击返回时...它不会返回。我的html代码 <nav> <img src="../images/shotbyopi.logo (5).png" alt="logoPic" /> <ul id="sidemenu"> <li><a href="#">Home</a></li> <hr /> <li><a href="#about-1">About</a></li> <hr /> <li><a href="#wrapper">Services</a></li> <hr /> <li><a href="#contact">Contact</a></li> </ul> <i class="fa-solid fa-circle-chevron-down" onclick="toggleMenu()"></i> </nav> 这是我正在处理的特定屏幕的 CSS @media (min-width: 481px) and (max-width: 768px) { nav .fa-circle-chevron-down { display: block; font-size: 85px; position: fixed; top: 20px; right: 20px; color: transparent; -webkit-text-stroke: 4px #fff; z-index: -2; transition: transform 0.5s ease-in-out; margin-top: 60px; cursor: pointer; } nav img { width: 325px; height: 325px; } nav .fa-solid:hover { transform: translateY(-10px); transform: rotate(90deg); } nav ul { display: flex; flex-direction: column; row-gap: 20px; margin-left: 0; background: transparent; position: fixed; text-align: center; margin-top: 20px; top: -100vh; left: 0; width: 27%; height: 100vh; padding: 50px 20px; z-index: 2; transform: translateX(230%); transition: top 0.5s ease-in-out; } /* When the menu is active */ nav ul.show-menu { top: 0; /* Slide down into view */ } /* Styling for individual list items */ nav ul li { margin: 5px 0; font-size: 1.5rem; } /* Make sure links are styled clearly */ nav ul li a { color: white; text-decoration: none; } } 提供的 CSS 代码似乎是使用菜单图标和项目列表来设计导航元素 (nav) 的样式。我的菜单栏功能的 JavaScript 代码 function toggleMenu() { const menu = document.getElementById('sidemenu'); const toggleIcon = document.querySelector('.toggle-menu'); menu.classList.toggle('show-menu'); toggleIcon.classList.toggle('rotate'); } document.addEventListener('DOMContentLoaded', () => { const toggleIcon = document.querySelector('.toggle-menu'); if (toggleIcon) { toggleIcon.addEventListener('click', toggleMenu); } else { console.error('Element with class "toggle-menu" not found.'); } }); 我尝试从 Gemini AI 获取更正，但它开始显示错误，下面是 javascript 代码 function toggleMenu() { const menu = document.getElementById('sidemenu'); const toggleIcon = document.querySelector('.toggle-menu'); menu.classList.toggle('show-menu'); toggleIcon.classList.toggle('rotate'); } document.addEventListener('DOMContentLoaded', () => { const toggleIcon = document.querySelector('.toggle-menu'); if (toggleIcon) { toggleIcon.addEventListener('click', toggleMenu); } else { console.error('Element with class "toggle-menu" not found.'); } }); 由于 z-index 设置，菜单会覆盖图标，并使菜单打开时图标不可点击。通过增加菜单图标的 z-index (z-index: 3)、将切换菜单类添加到图标并确保在 CSS 中定义旋转类，您可以解决此问题。这样，图标仍然可单击，并且菜单可以按预期打开和关闭。 nav .fa-circle-chevron-down { ... z-index: 3; ... } <nav> <img src="../images/shotbyopi.logo (5).png" alt="logoPic"> <ul id="sidemenu"> ... </ul> <i class="fa-solid fa-circle-chevron-down toggle-menu"></i> </nav> document.addEventListener('DOMContentLoaded', () => { const toggleIcon = document.querySelector('.toggle-menu'); if (toggleIcon) { toggleIcon.addEventListener('click', toggleMenu); } else { console.error('Element with class "toggle-menu" not found.'); } }); function toggleMenu() { const menu = document.getElementById('sidemenu'); const toggleIcon = document.querySelector('.toggle-menu'); menu.classList.toggle('show-menu'); toggleIcon.classList.toggle('rotate'); } .toggle-menu { transition: transform 0.5s ease-in-out; } .toggle-menu.rotate { transform: rotate(180deg); /* Adjust the degree as needed */ }

javascript html css media-queries

回答 1 投票 0

手机条件CSS媒体查询问题

我试图在手机上以横向模式显示两列，或者以纵向或横向模式显示一列。由于某种原因，我的 iPad Pro 在纵向模式下会显示一栏。任何人都可以帮助...

css responsive-design media-queries

回答 1 投票 0

媒体查询和响应式网站问题

当我尝试使用最大宽度为 400 px 的 CSS 使网站响应时，所有元素或所有正文都会移至左侧，并且我无法将其放在页面中间，我该怎么办解决这个问题...

html css media-queries

回答 1 投票 0

CSS hack也支持IOS16

这个 CSS hack 曾经适用于 iOS 15.6，但在 iOS 16 中不起作用。 @media 不是全部和（最小分辨率：.001dpcm）{ @supports (-webkit-appearance:none) {} } 还有什么新的技巧吗

css media-queries ios16

回答 2 投票 0

滚动时隐藏菜单（导航栏），在不同媒体查询中按不同数量的像素

向下滚动 96 像素时，我的导航栏会隐藏，因为这是它在大屏幕上的高度。向上滚动会导致导航栏返回。但是，导航栏高度会在不同的断点处发生变化，我

javascript media-queries

回答 1 投票 0

响应式媒体查询在 Google Chrome 中不起作用

我编写了一段CSS代码来根据用户的屏幕宽度流畅地切换网站布局的宽度。如果用户可用的屏幕空间较少，布局的宽度会增加以填充更多...

css google-chrome firefox width media-queries

回答 13 投票 0

如何在 Shopify 中使这个光滑的滑块响应平板电脑和移动设备？

滑块在桌面视图上看起来不错，但无法正确调整大小。我只是希望它在平板电脑和移动设备上调整大小以提高响应速度。在主视图中保持静止 3 张图片。我尝试了一些媒体

responsive-design shopify media-queries slick.js

回答 1 投票 0

关于 'media="(min-width: 0px)" '

关于这段代码（我在苹果网站上找到了类似的代码）：关于这段代码（我在苹果网站上找到了类似的代码）： <picture> <source srcset="1.jpg, 1_2x.jpg 2x" media="(max-width: 734px)" /> <source srcset="2.jpg, 2_2x.jpg 2x" media="(max-width: 1068px)" /> <source srcset="0.jpg, 0_2x.jpg 2x" media="(min-width: 0px)" /> <img src="0.jpg" alt /> </picture> 问题 - 为什么˙(min-width: 0px)？我猜这允许将 2x 考虑到剩余的浏览器窗口大小，或者还有其他原因吗？我尝试 <picture> <source srcset="1.jpg, 1_2x.jpg 2x" media="(max-width: 734px)" /> <source srcset="2.jpg, 2_2x.jpg 2x" media="(max-width: 1068px)" /> <source srcset="0.jpg, 0_2x.jpg 2x" /> <img src="0.jpg" alt /> </picture> 并得到了类似的结果。为什么那么指定(min-width: 0px)？ <source>元素用于为不同的图像尺寸提供不同的图像源。 <source srcset="0.jpg, 0_2x.jpg 2x" media="(min-width:0px)" /> 适用于先前媒体查询均不适用的情况。 (min-width:0px) 确保如果宽度与之前的条件不匹配，则考虑源。

html media-queries srcset

回答 1 投票 0

CSS 媒体查询未捕获特定屏幕尺寸 (384x730)

我正在为一个项目进行响应式设计，我正在尝试使用媒体查询来定位特定的屏幕尺寸。然而，我当前的媒体查询似乎没有捕获 38 的屏幕尺寸...

html css media-queries

回答 1 投票 0

如何用CSS打印最后一页的背景颜色？

我试图在打印时显示纯色背景色。我用过 @媒体打印{ 高度：100%；最小高度：100%；背景：#CCC； } 并激活“打印背景图...

html css media-queries

回答 4 投票 0

如何更改并排div以在移动设备上堆叠？

我试图让我的 2 个 div（并排的）在移动设备上查看时更改为堆叠的 div，如小提琴所示，但我希望“两个位于顶部，“一个”位于第二个。这是...