media-queries 相关问题

我正在尝试使用Javascipt媒体查询，但我无法让它工作。我尝试 iframe 仅在大小小于 700px 时加载框架：移动的（）; 移动功能（）{ </desc> <question vote="1"> <p>我正在尝试使用 Javascipt 媒体查询，但我无法让它工作。</p> <p>我正在尝试 iframe 仅在大小小于 700px 时加载框架，:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> mobile(); function mobile(){ const mql = window.matchMedia('screen and (max-width: 700px)'); checkMedia(mql); mql.addListener(checkMedia); function checkMedia(mql){ if(mql.matches){ function frameloading() { var frameone= document.getElementById("delayedframe"); frameone.src = "360°-image url" }; window.addEventListener("load",(frameloading)); } } } </script></code></pre> <pre><code><iframe id="delayedframe" src="about:blank" frameborder="0" style="position:absolute;top:100px;left:0px;right:0px;bottom:0px" height="200px" width="100%""><p>Your browser does not support iframes.</p></iframe></code></pre> </div> </div> 我在这个测试中使用了这篇文章：<a href="https://stackoverflow.com/questions/58599373/multiple-media-queries-in-javascript">javascript中的多个媒体查询</a><p></p> <p>我也尝试过：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> function checkMediaQuery() { if (window.innerWidth > 700) { function frameloading() { var frameone= document.getElementById("delayedframe"); frameone.src = "360°-image url" }; window.addEventListener("load",(frameloading)); } } window.addEventListener('resize', checkMediaQuery); </script></code></pre> <pre><code><iframe id="delayedframe" src="about:blank" frameborder="0" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%" class="forcewide"><p>Your browser does not support iframes.</p></iframe></code></pre> </div> </div> <p></p> <p>当宽度小于 700px 时，所有这些都不会加载 iframe。</p> </question> <answer tick="false" vote="0"> <p><strong>以下是工作代码：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> function mobile() { const mql = window.matchMedia("screen and (max-width: 700px)"); // listener to check changes mql.addListener(checkMedia); } function checkMedia(mql) { if (mql.matches) { frameloading(); } } function frameloading() { alert('media query working'); const frameone= document.getElementById("delayedframe"); frameone.src = "360°-image url" } window.addEventListener("load ", mobile);</code></pre> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <iframe id="delayedframe" src="about:blank" frameborder="0" style="position:absolute;top:100px;left:0px;right:0px;bottom:0px" height="200px" width="100%" "><p>Your browser does not support iframes.</p></iframe> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript html iframe media-queries mediaquery

回答 0 投票 0

如何根据屏幕宽度改变NextJS Image标签的高度？

我正在使用 next/image 来渲染我的图像，如下所示：这对于屏幕宽度来说很好......

css reactjs next.js media-queries next-images

回答 6 投票 0

如何将媒体查询应用于后端发送的电子邮件？

我从后端（节点）发送电子邮件并添加媒体查询，以便在手机和桌面上打开电子邮件时显示不同的内容。当电子邮件为

css node.js media-queries

回答 1 投票 0

我不明白如何使用CSS网格来获得这个设计

我正在学习 HTML 和 CSS，问题是我需要完成一个设计。我必须使用 CSS 网格来进行整体布局。但问题是那些网格项的高度完全...