media-queries 相关问题

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

我正在尝试弄清楚标签的用法，因为我偶然发现了一些非工作场景，我想问一下。这是一个基本的 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

如何获取专门定位的 div 以根据浏览器宽度正确调整大小

有没有一种方法可以让 div 容器在容器开始触及浏览器侧面时响应式缩小（如果浏览器变小）......而不是只在它触及我时才这样做......

css responsive-design media-queries

回答 1 投票 0

当我到达断点480px时，我在body上设置的右侧填充消失了

我的代码中有一些文章显示了网格。我已经将body的padding设置为padding: 0 1em;以下元素和类的最小宽度为 450px；有人可以吗

css flexbox grid media-queries padding

回答 1 投票 0

srcset 和尺寸总是下载最大的

这是代码这是代码 <img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" sizes="(max-width: 511px) 60w, 65w"> 我希望它下载2.jpg，但它却下载4.jpg。不过，4.jpg 为什么我把 2500vw 放入 65w 时却下载了 sizes。我正在检查的视口是 1500px。您不应使用 w 作为 sizes 中的单位。正确语法： <img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" sizes="(max-width: 511px) 60px, 65px">

html css media-queries

回答 1 投票 0

测试响应式网站的最佳方法

我的任务是创建一个网站（主要使用 javascript 和 JQuery），该网站从网站读取某个元素 - 例如导航栏 - 并测试它以查看它在不同情况下的反应

javascript jquery testing responsive-design media-queries

回答 4 投票 0

如何让我的 CSS 媒体查询正常工作？

我无法让 CSS 媒体查询工作。我过去曾与他们合作过，他们也为我工作过，但在这个特定的网站上，他们不起作用。我添加了我无法让 CSS 媒体查询工作。我过去曾与他们合作过，他们也为我工作过，但在这个特定的网站上，他们不起作用。我添加了<meta name="viewport" content="width=device-width, initial-scale=1">，但仍然不起作用。这是我唯一的 CSS 媒体查询 @media and screen ( max-width: 700px ) {.header-image {display: none;}} 你在某处发现错误了吗？我很确定这将是一件完全微不足道的事情，但我花了几个小时试图让它发挥作用，但到目前为止还没有成功。非常感谢:) 您的代码语法错误这是有效的媒体查询 @media screen and ( max-width: 700px ) { ... } CSS 媒体查询语法错误正确的媒体查询语法是 @media screen and (max-width:600px){ /* 屏幕的 CSS 规则 */}

html css media-queries

回答 2 投票 0

Calc 不适用于媒体查询，变量也不适用于

使用引导5.3.1 尝试编写一个媒体查询，当页面大小从 bootstrap-lg （例如 min-size = 992px）缩小到中等大小的页面（例如 max size = 991px 宽）时，该查询会改变内容这个

firefox media-queries bootstrap-5 media

回答 1 投票 0

如何让首选颜色方案灯光使用默认颜色值？

而不是单独定义 Preferred-color-scheme: light 上的所有更改，如何才能使其自动应用所有默认引导颜色值？

html css bootstrap-4 media-queries themes

回答 1 投票 0

在vue上制作自适应滑动器

我有一个通过index.html中的脚本连接的swiper组件这是刷卡器...