responsive-design 相关问题

我需要一些帮助来创建徽标并在 css 中反转

有这个标志，来自Mccan Design 在此处输入图像描述 并且以某种方式颠倒了，我正在尝试复制这种风格，但我对此很陌生，不知道该怎么做。 我已经在

如何防止调整浏览器大小时图像放大？

这里是新手。有谁知道当我调整浏览器大小时如何防止图像放大？ 我正在尝试使用顺风和流咬合创建一个旋转木马。这是我的 CSS 代码： ... 这里是新手。有谁知道当我调整浏览器大小时如何防止图像放大？ 我正在尝试使用顺风和流咬合创建一个旋转木马。这是我的 CSS 代码： <main> <section id="hero-section" class="bg-blue-300" style="height: calc(100vh - 65px)" > <div id="default-carousel" class="relative h-full w-full" data-carousel="slide" > <!-- Carousel wrapper --> <div class="relative h-full overflow-hidden md:h-96"> <!-- Item 1 --> <div class="hidden duration-1000 ease-in-out" data-carousel-item> <img src="sample-image2-mobile.jpg" class="absolute block object-cover h-full w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..." /> </div> <!-- Item 2 --> <div class="hidden duration-1000 ease-in-out" data-carousel-item> <img src="sample-image2-mobile.jpg" class="absolute block object-cover h-full w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..." /> </div> </div> <!-- Slider indicators --> <div class="absolute z-30 -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse" > <button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0" ></button> <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1" ></button> <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2" ></button> </div> </div> </section> </main> 我尝试过诸如设置高、对象覆盖等，但仍然不起作用。 提示： 使用 object-fit: contains 而不是 object-cover <img src="sample-image2-mobile.jpg" class="absolute block object-contain h-full w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..." /> Tailwind CSS 提供宽高比实用程序（例如，aspect-w-16 aspect-h-9 表示 16:9 的比例），但这种方法取决于您的设计要求。 Tailwind CSS 允许使用断点进行响应式设计。您可以考虑根据视口大小调整图像的大小甚至来源。

Javascript 将图像放置在用户点击的位置

当用户单击现有的 HTML 图像时，我尝试使用 javascript 将图像叠加层放置在该图像上。我有那部分工作，但我想知道是否可以重新定位超级...

为什么我的网站首先加载并显示页面底部？

我似乎无法弄清楚这一点，希望大家能帮忙。 当我加载网站时，它会在页面底部打开。我以为可能是平滑滚动js脚本或者视差sc...

响应式布局中的全高侧边栏

我正在尝试创建一个带有全高侧边栏的响应式布局。在桌面上，侧边栏应浮动在主要内容的左侧，在平板电脑/移动设备上，侧边栏应与主要内容重叠...

有没有办法根据设备屏幕分辨率有条件地显示React Swiper中的slidesPerView？

7...

如果我的父容器大小未知并且是动态的，如何在保持宽高比的同时调整图像大小

我正在制作一个图片库。在开发使图像达到浏览器窗口完整大小的功能时，我意识到我无法专门设置父元素的大小...

如何在输入文本框内放置“复制到剪贴板”图标？

我正在设计一个密码生成器，但在尝试将“复制到剪贴板”图标放置在将生成密码的输入文本框中时遇到问题。 我尝试放置

移动优先和非移动优先响应式布局有什么区别？

嗯，我不确定我是否了解移动优先和非移动优先响应式布局之间的区别？ 这是我所知道的，可能有些地方不对： 将媒体查询与 CSS 结合使用（也用于...

媒体查询 CSS 电子邮件

这是我的问题。 我正在用表格编写时事通讯。工作正常。我正在使用媒体查询来设置移动样式。在我的电脑上，当我缩小浏览器大小时，它工作得很好。当缩放我的

如何将篮球记分牌的得分文本居中？

我正在制作篮球记分板，我想知道如何将记分板容器内的得分文本居中？ 虽然主 div 已设置为 Flex 容器，但 p 分数文本位于...

div位于底部中心而不滚动

我想创建一个静态页面，其中包含完全没有内容的 YouTube 视频。我需要将视频 div 放在页面的中心底部，无需滚动，也无需提及高度和宽度{因为我是你...

为什么在编辑器中显示良好而在模拟器中显示完全不同？

我正在 Android studio 中设计我的 Android 应用程序。在设计视图中，它看起来像我想要的，但在模拟器中完全不同。所有约束均已添加。 我想知道如何解决...

使用 Flexbox 和其他 div 进行 CSS 格式化

我正在尝试使用CSS格式化网页，使其看起来像这样： 这个想法是页面响应如下；红色和蓝色列（左和右）应各自具有设定的宽度。

如何让我的网站响应手机？

我无法让我的网站在手机上正确显示。它应该是这样的（来自我正在关注的教程）： 不幸的是，这就是我的 Samsung Galaxy S5 上的样子： 我是...

我如何确定是否使用手机或ipad来处理不同的选择

我的 Web 应用程序有一个多重选择字段，但它由 100 个值组成，因此在我的 PC 上测试时，必须使用滚动来查看整个列表，并按住 Control 键单击来选择多个值...

将云图标居中到导航边框背景的右中

我正在构建一个垂直导航栏，并且想要添加一个以右边框为中心、直接在背景线上的云图标。 ... 我正在构建一个垂直导航栏，并且想要添加一个以右边框为中心、直接在背景线上的云图标。 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div class="cloud-icon"> <svg>...</svg> </div> </nav> 这是code-pen示例。我非常努力地完成这项工作，因此我们将不胜感激任何和所有反馈。 我尝试过使用 flex-box、css-grid 和边距来做到这一点，老实说，只是让它定位并保持在右侧，我就陷入困境，更不用说移动响应了。 我编辑了 svg 视图框以使其居中 :root { --beige: #d9d9d9; } .contents { height: 100vh; width: 115%; margin: 0; display: grid; grid-template-columns: 1fr auto; } body { margin: 0; } nav { background-color: var(--beige); width: 50%; display: flex; } nav ul { list-style-type: none; margin: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; } nav li { padding: 3%; } nav a { text-decoration: none; font-size: 1rem; letter-spacing: 11px; } .cloud { grid-column: 2; align-self: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="contents"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> <span class="cloud"> <svg width="132" height="60" viewBox="127.037 138.437 123.778 64.061" xmlns="http://www.w3.org/2000/svg"> <path d="M 238.358 176.764 C 236.657 179.93 233.537 182.461 229.622 183.849 C 225.707 185.238 221.287 185.382 217.246 184.252 L 216.805 184.121 C 214.807 183.557 213.071 182.515 211.827 181.134 C 210.583 179.752 209.892 178.097 209.845 176.389 C 209.851 175.101 210.242 173.832 210.985 172.692 C 211.729 171.551 212.802 170.572 214.114 169.837 C 214.538 169.602 214.846 169.253 214.981 168.852 C 215.117 168.451 215.073 168.024 214.856 167.647 C 214.67 167.34 214.384 167.081 214.028 166.896 C 213.672 166.711 213.261 166.608 212.838 166.599 C 212.425 166.599 212.022 166.697 211.678 166.88 C 209.859 167.899 208.354 169.24 207.276 170.801 C 206.199 172.361 205.577 174.1 205.46 175.884 C 205.379 178.154 206.104 180.395 207.552 182.342 C 208.999 184.29 211.107 185.862 213.627 186.873 C 212.264 189.048 210.205 190.889 207.664 192.205 C 205.122 193.522 202.191 194.266 199.173 194.361 C 197.476 194.407 195.791 194.104 194.278 193.482 C 192.765 192.86 191.472 191.939 190.519 190.804 C 190.308 190.565 190.03 190.369 189.708 190.232 C 189.385 190.096 189.028 190.022 188.663 190.018 C 188.303 190.032 187.952 190.114 187.638 190.257 C 187.324 190.4 187.055 190.6 186.854 190.842 C 185.012 193.329 182.069 195.16 178.618 195.965 C 175.168 196.769 171.468 196.487 168.266 195.174 C 165.064 193.862 162.598 191.618 161.367 188.896 C 160.136 186.174 160.232 183.176 161.635 180.508 C 162.29 178.927 163.634 177.592 165.418 176.752 C 167.202 175.911 169.304 175.623 171.333 175.94 C 173.416 176.327 175.236 177.346 176.414 178.786 C 176.699 179.071 177.082 179.283 177.515 179.394 C 177.948 179.505 178.413 179.512 178.85 179.412 C 179.287 179.312 179.679 179.111 179.976 178.833 C 180.273 178.556 180.462 178.214 180.52 177.85 C 180.521 177.552 180.416 177.26 180.219 177.008 C 179.043 175.502 177.398 174.272 175.45 173.439 C 173.502 172.607 171.316 172.2 169.113 172.261 C 166.909 172.322 164.764 172.847 162.89 173.785 C 161.016 174.723 159.48 176.04 158.433 177.607 C 156.666 180.278 155.954 183.322 156.392 186.33 C 152.473 186.747 148.489 186.189 144.974 184.731 C 141.458 183.272 138.578 180.983 136.718 178.168 C 135.866 176.895 135.397 175.477 135.349 174.031 C 137.943 174.637 140.698 174.622 143.281 173.987 C 145.864 173.352 148.162 172.125 149.896 170.455 C 151.056 169.18 152.686 168.235 154.554 167.754 C 156.421 167.273 158.429 167.282 160.289 167.778 C 160.619 167.859 160.967 167.875 161.306 167.826 C 161.644 167.778 161.964 167.665 162.238 167.497 C 162.514 167.33 162.735 167.112 162.885 166.861 C 163.034 166.61 163.107 166.334 163.097 166.056 C 163.014 163.528 163.809 161.031 165.392 158.848 C 166.974 156.665 169.281 154.882 172.052 153.701 C 173.237 153.196 174.536 152.889 175.872 152.799 C 177.207 152.709 178.552 152.837 179.824 153.177 C 179.824 153.42 179.639 153.626 179.569 153.85 C 178.811 156.349 179.088 158.979 180.358 161.338 C 181.29 163.093 182.746 164.633 184.596 165.822 C 186.446 167.011 188.633 167.812 190.96 168.153 C 191.816 168.287 192.686 168.356 193.559 168.358 C 196.505 168.334 199.373 167.584 201.777 166.209 C 204.182 164.834 206.009 162.9 207.015 160.665 C 207.117 160.424 207.152 160.168 207.12 159.915 C 207.087 159.661 206.987 159.417 206.826 159.198 C 206.665 158.979 206.447 158.791 206.187 158.647 C 205.927 158.502 205.632 158.405 205.321 158.362 C 204.812 158.306 204.295 158.388 203.85 158.594 C 203.405 158.801 203.057 159.121 202.862 159.504 C 202.158 161.026 200.885 162.334 199.219 163.248 C 198.084 163.885 196.797 164.324 195.44 164.54 C 194.084 164.755 192.686 164.74 191.337 164.498 C 189.987 164.255 188.715 163.789 187.6 163.129 C 186.485 162.469 185.551 161.63 184.859 160.665 C 183.57 158.411 183.339 155.857 184.209 153.476 L 184.557 152.746 C 185.903 149.933 188.362 147.556 191.552 145.985 C 194.742 144.414 198.485 143.736 202.201 144.056 C 205.918 144.376 209.399 145.676 212.107 147.755 C 214.814 149.833 216.596 152.575 217.176 155.554 C 217.289 155.98 217.583 156.36 218.006 156.63 C 218.43 156.9 218.957 157.043 219.496 157.033 C 223.003 156.986 226.483 157.541 229.704 158.662 C 233.809 160.152 237.021 162.889 238.641 166.278 C 240.261 169.667 240.159 173.435 238.358 176.764 Z" fill="black" transform="matrix(1, 0, 0, 1, -3.552713678800501e-15, -3.552713678800501e-15)"/> </svg> </span> </body> </html>

具有不同文件的 HTML5 视频，用于响应式设计

是否有 HTML5 视频的 srcset 等效项？目前，我在一个页面上有一个视频网格，连续 3 个，共 5 行（总共 15 个视频），如下所示： 是否有相当于 HTML5 视频的 srcset ？目前我在一个页面上有一个视频网格，连续 3 个，共 5 行（总共 15 个视频），都是这样的： <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> <source src="14.webm" type="video/webm"> <source src="14.mp4" type="video/mp4"> </video> 我遇到的问题是我的页面请求大约为 6mb。由于我的视频网格是 3 宽... <div class="row"> <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> <source src="13.webm" type="video/webm"> <source src="13.mp4" type="video/mp4"> </video> <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> <source src="14.webm" type="video/webm"> <source src="14.mp4" type="video/mp4"> </video> <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> <source src="15.webm" type="video/webm"> <source src="15.mp4" type="video/mp4"> </video> </div> ...很明显，对于屏幕尺寸约为 320 像素的小型设备，我不需要 3 400 像素的视频文件，我可以使用较小的视频文件。 我正要开始重构来加载我的页面，如下所示： <div class="row"> <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> </video> <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> </video> <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> </video> </div> 然后使用 JavaScript 基本上说： if($(window).width() < 500){ $('#video13').append('<source src="13-SMALL-FILE.mp4" type="video/mp4">') }else{ $('#video13').append('<source src="13-LARGE-FILE.mp4" type="video/mp4">') } 这是一个好的选择还是有更好的方法或已经存在的库？经过大量谷歌搜索后，我没有找到非常有用的信息。 视频和图片元素长期以来都支持 media 属性，因此您可以执行多种操作，包括： <video playsinline muted preload="metadata"> <source src="" type="" media="(orientation: landscape)"> <source src="" type="" media="(orientation: portrait)"> </video> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video 仅当屏幕的 @media 为 max-width 时，您才可以使用 500px 查询来应用特定宽度： @media screen and (max-width:500px){ video { width:100% !important; } }

为什么我的响应式设计的 HTML 结构无法正常工作？

我正在研究一种带有相关CSS的HTML响应式结构，从纸面上看，它应该非常简单，但最终对我来说一点也不简单。 在该结构中有一个带有固定

强制柔性容器填充所有空间

当键盘打开时，如何强制我的小部件（2）填充整个屏幕空间并几乎隐藏我的小部件（1）？期望结果的示例位于期望行为图片下，我通过