responsive 相关问题

我正在尝试弄清楚标签的用法，因为我偶然发现了一些非工作场景，我想问一下。这是一个基本的 HTML 我正在尝试弄清楚标签的用法，因为我偶然发现了一些非工作场景，我想问一下。这是一个基本的 HTML <picture> <source srcset="large.jpg" media="(min-width: 850px)"> <source srcset="medium.jpg" media="(min-width: 650px)"> <img src="small.png" alt="A description of the image."> </picture> 这按预期工作，src 显示图像，而在通过媒体切换图像达到所需宽度的情况下。但是，将媒体更改为 (max-width) 似乎不再起作用，只有基本 src 属性起作用。根据我的理解，首选通过 min-width 的移动优先方法，但使用 max-width 也应该有效。也许有人可以告诉我发生了什么事并且它不起作用？我还看到了带有（最小宽度）em 单位的示例，我知道它们的用途，但为什么有人会在本内容中使用这些单位？在这种情况下，响应式方法有什么优势吗？最后，即使有了第一个工作示例，在 Chrome 开发工具中预览它也不起作用。问题很明显，这到底是怎么回事？我知道图片标签更适合网络，但要么我在这里遗漏了一些东西，要么与媒体或容器查询等其他解决方案相比，它导致了一些问题。预先感谢您谈论此标签的这些差异和用法。我已经查阅了文档，检查了一些工作示例，尝试复制它们，但结果好坏参半。有时有效，有时无效。你的想法没有问题。您的图像链接可能有问题。因此，您必须通过单击检查器内的链接来检查图像是否在新选项卡中打开。如果图像未作为预览出现，则说明链接不正确。只有在max-width方法中，您必须将较小尺寸的图像放在顺序中的前面，然后将较大尺寸的图像放在后面，以便图像正确且逐渐地显示。 <picture> <source alt="medium" srcset="https://placehold.co/600x400/orange/white" media="(max-width: 650px)"> <source alt="large" srcset="https://placehold.co/600x400/red/white" media="(max-width: 850px)"> <img src="https://placehold.co/600x400/blue/white" alt="A description of the image."> </picture>

html image media-queries responsive

回答 1 投票 0

响应式项目在 Flask 本地 Web 服务器中不起作用

我正在开发一个 Flask web 应用程序，其中包含一些响应式项目。例如，导航栏隐藏在小屏幕中，并替换为打开侧栏的图标，而元素...

html css flask responsive localserver

回答 1 投票 0

当从移动浏览器访问 Gmail 时，最大宽度在 html 电子邮件中不起作用？

我正在尝试创建一个宽度为 600px 且最大宽度为 100% 的列 ... 我试图拥有一个宽度为 600px 且最大宽度为 100% 的列 <table style="width:600px;max-width:100%" id="my-table"> <tbody> <tr> <td> </td> <td > <img style="width:600px;max-width:100%"> </td> <td> </td> </tr> </tbody> </table> 我在 Samsung Internet 和 Firefox 中的 gmail 中尝试过此操作，在这两种情况下，它显示的宽度都大于屏幕。我也尝试添加 <style> @media screen and (max-width:500px) { table { max-width: 350px !important; } } </style> 但它也不起作用。不过它确实可以在 Gmail 应用程序上运行 Gmail 和某些电子邮件客户端对 CSS 的支持有限，并且样式可能无法按预期呈现。你可以试试这个： <table width="100%" style="max-width:600px;"> <tr> <td style="width:33.33%;"></td> <td style="width:33.33%;"><img src="your-image-url.jpg" style="max-width:100%; height:auto;"></td> <td style="width:33.33%;"></td> </tr> </table>

html css html-email responsive

回答 1 投票 0

为什么当表单输入位于具有 display: flex 的容器内时，其宽度会缩短？

我正在尝试编码的设计我尝试对这种表单输入的设计进行编码，但是在使用display:flex时遇到了问题。输入的宽度缩短而不是像我预期的那样扩展......

html css input flexbox responsive

回答 1 投票 0

这部分怎么做？

我对这个具有弯曲背景的部分有疑问，我不知道如何使用 html/css 正确执行此操作并使其响应所有设备，在此处输入图像描述我试着做...

html css layout responsive sections

回答 1 投票 0

为什么响应式图像在弹性容器内缩小并且不占据响应式屏幕尺寸上的整个空间？

我想防止图像在弹性盒内收缩，从而在弹性容器内留下太多空间。事实上，图像是使用 Bootstrap 5 类中的 img-fluid 类来制作响应式的......

bootstrap-4 media-queries responsive image-scaling responsive-images

回答 1 投票 0

使用 SrcSet 来响应图像 - 只有最大的图像被称为[关闭]

我正在尝试在网站上使用 SrcSet 来响应图像，但只调用最大的图像。有什么想法吗？我正在尝试在网站上使用 SrcSet 来响应图像，但只调用最大的图像。你知道这里出了什么问题吗？ <img src="https://eg.com/example.jpg?auto=format" srcset="https://eg.com/example.jpg?auto=format&w=320 320w, https://eg.com/example.jpg?auto=format&w=480 480w, https://eg.com/example.jpg?auto=format&w=800 800w, https://eg.com/example.jpg?auto=format&w=1024 1024w, https://eg.com/example.jpg?auto=format&w=1400 1400w, https://eg.com/example.jpg?auto=format&w=1900 1900w" sizes="(max-width: 320px) 320px, (max-width: 480px) 480px, (max-width: 800px) 800px, (max-width: 1024px) 600px, (max-width: 1400px) 800px, (max-width: 1900px) 900px, 1024px" alt=""> 我在其他网站上看到过这项工作，我尝试模仿那里的代码，但无论浏览器大小如何，都只会调用最大的图像。这可能不是您的代码的实际问题。有几个因素会影响浏览器如何决定使用 srcset 中的哪个图像。 srcset 上的 MDN 页面注释了以下内容（强调我的）：查看屏幕尺寸、像素密度、缩放级别、屏幕方向和网络速度。找出尺寸列表中第一个正确的介质条件。查看为该媒体查询指定的槽大小。加载 srcset 列表中引用的与插槽大小相同的图像，或者如果没有，则加载第一个大于所选插槽大小的图像。 https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images 同一页面还指出了测试时的以下注意事项（再次强调我的）：注意：在使用桌面浏览器进行测试时，如果将窗口设置为最窄宽度时浏览器无法加载较窄的图像，请查看视口是什么（您可以通过进入浏览器的 JavaScript 控制台并输入 document.querySelector('html').clientWidth)。不同的浏览器都有最小尺寸，它们可以让您将窗口宽度减小到，并且它们可能比您想象的更宽。使用移动浏览器进行测试时，您可以使用 Firefox 的 about:debugging 页面等工具来使用桌面开发人员工具检查移动设备上加载的页面。要查看加载了哪些图像，您可以使用 Firefox DevTools 的 Network Monitor 选项卡或 Chrome DevTools 的 Network 面板。对于 Chrome，您可能还需要禁用缓存以防止它选择已下载的图像。

html image responsive srcset

回答 1 投票 0

如果打开另一张图像则隐藏图像，反之亦然

我有 2 个图像（Image1、Image2）的代码，如果单击另外 2 个图像，它们都会打开，最后有 onclick 和 java 部分，如下所示： ... 我有 2 个图像（Image1、Image2）的代码，如果单击其他 2 个图像，这两个图像都会打开，最后有 onclick 和 java 部分，如下所示： <table style="whatever"> <tbody> <tr style="whatever""> <td><a href="link to game1 when the image is clicked" alt="Game1" target="blank" onclick="AfficherCacher('Image1')"> <img src="the image clicked to open Game1+Image1.jpg" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a><br></td> <td><a href="link to game2 when the image is clicked" alt="Game2" target="blank" onclick="AfficherCacher('Image2')"> <img src="the image clicked to open Game2+Image2.jpg" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a><br></td> </tr> </tbody> </table> 然后 </table> <table style="whatever"> <tbody> <tr style="whatever"> <td> <div id="Image1"> <ul> <img src="Image1.jpg"> </ul> </div> </td> </table> <table style="whatever"> <tbody> <tr style="whatever"> <td> <div id="Image2"> <ul> <img src="Image2.jpg"> </ul> </div> </td> 最后的 JavaScript 部分使其一切正常： <p> <script type="text/javascript"> // <![CDATA[ function AfficherCacher(texte) { var test = document.getElementById(texte).style.display; if (test == "block") { document.getElementById(texte).style.display = "none"; } else { document.getElementById(texte).style.display = "block"; } } // ]]> </script> </p> 唯一的是Image1和Image2可以同时显示在页面上，这是我不想要的。我想打开Image2使Image1消失，并打开Image1使Image2消失。我不知道该用什么。预先感谢您的帮助。我尝试过发明“if”条件，但我不懂 JavaScript（或 CSS），所以我会盲目地去做，而且我显然做错了什么。我不知道我能使用什么以及什么存在/有效。您应该在此处使用数据属性，这将使事情变得更容易。然后，您可以使用 classList.toggle 函数根据条件应用类或删除类。在下面的代码中，我将单击的按钮的数据属性值与每个图像进行比较，并隐藏不具有相同数据属性值的每个图像。这甚至在使用 100 张图像时也有效。 const Buttons = document.querySelectorAll('menu button'); const Images = document.querySelectorAll('img'); Buttons.forEach(button => { button.addEventListener('click', function() { let dataIndex = this.dataset.image; Images.forEach(image => { let imageIndex = image.dataset.image; image.classList.toggle('d-none', imageIndex !== dataIndex); }) }) }) .d-none { display: none; } <menu> <li><button data-image="1">Show Image 1</button></li> <li><button data-image="2">Show Image 2</button></li> </menu> <img data-image="1" class="d-none" src="https://fakeimg.pl/200/ff0000/FFFFFF"> <img data-image="2" class="d-none" src="https://fakeimg.pl/200/0000ff/FFFFFF">

javascript css onclick responsive show-hide

回答 1 投票 0

如何让css无限动画滑块在移动设备上工作？

我正在创建一个价格滚动条/滑块，它在台式机/笔记本电脑上完美运行，但我无法让它在移动设备上正常运行而不出现故障。在移动设备上，股票代码项目只会出现几秒钟......

javascript html css css-animations responsive

回答 1 投票 0

无法在移动屏幕中单击/选择下拉选项，使用反应选择下拉菜单

我正在使用反应选择下拉菜单，它在桌面模式下选择/取消选择选项时效果很好，但是一旦我切换到响应式屏幕，选项就可见，但当我尝试单击dro时...

javascript reactjs dropdown responsive react-select

回答 2 投票 0

responsive 相关问题

最新问题