responsive-design 相关问题

CSS - 当父容器较小时也可以在桌面上应用移动模式

我有一个 HTML/CSS 小部件，可以集成到网站的任何位置。该小部件是响应式的，并且对于移动设备具有以下规则： @media 屏幕和（最大宽度：768px）{ .bstfbt__price-cta--

BoxConstraints 导致 TextBox 由于换行而未与 Text 对齐。颤动布局

我有一个关于 flutter 的 ui/ux 布局问题。 在我的文本旁边，我看到一个不应该存在的空白。我在图像中将其标记为红色。 我认为这是由我在

使全屏弹出响应式

我正在制作全屏弹出窗口以适用于一个应用程序。 /* 全屏弹出窗口 */ .fullscreen-popup { 位置：固定； 顶部：0； 左：0； 宽度：100%； </desc> <question vote="0"> <p>我正在制作全屏弹出窗口以适用于一个应用程序。</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;style&gt; /* Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255); display: flex; justify-content: center; align-items: center; } .close-button { position: absolute; top: 10px; right: 10px; padding: 8px 16px; border: none; border-radius: 4px; background-color: #f44336; color: #fff; cursor: pointer; } .popup-content { position: relative; padding: 20px; background-color: #ffffff; border-radius: 8px; text-align: justify; max-width: 80vw; /* Adjust max width for smaller screens */ overflow-y: auto; /* Allow vertical scrolling if needed */ } /* Media Queries for Responsive Design */ /* Tablet and Larger Screens */ @media screen and (min-width: 768px) { .details-container { grid-template-columns: repeat(2, minmax(300px, 1fr)); } } /* Mobile Screens */ @media screen and (max-width: 767px) { .details-container { grid-template-columns: repeat(1, minmax(100%, 1fr)); } /* Full Screen Popup Adjustments */ .fullscreen-popup { padding: 20px; } .close-button { top: 5px; right: 5px; } .popup { width: 90%; max-width: 90vw; } } img{ height: 50%; width: 50%; } &lt;/style&gt; &lt;body&gt; &lt;div class=&#34;fullscreen-popup&#34;&gt; &lt;div class=&#34;popup-content&#34;&gt; &lt;h2&gt;This is title of h2&lt;/h2&gt; &lt;img src=&#34;https://wallpapers.com/images/hd/720p-nature-background-7dtz4pan3cr3ot5v.jpg&#34;&gt; &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.&lt;/p&gt; &lt;button class=&#34;close-button&#34;&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>我已经实现了关闭按钮以正常工作，并且我已从项目中删除了工作代码以简化我的问题。</p> <p>我遇到的问题是，有时 h2、弹出内容和关闭按钮不会在移动屏幕尺寸上显示。另外，垂直和水平滚动在移动设备上不起作用。</p> <p>我尝试过位置属性、最大宽度、最大高度，但似乎在移动设备上不起作用。页面在手机上的行为非常奇怪。</p> <p>你能帮我解决这个问题吗？</p> </question> <answer tick="false" vote="0"> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt; &lt;style&gt; /* Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255); display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .close-button { position: absolute; top: 10px; right: 10px; padding: 8px 16px; border: none; border-radius: 4px; background-color: #f44336; color: #fff; cursor: pointer; } .popup-content { position: relative; padding: 20px; background-color: #ffffff; border-radius: 8px; text-align: justify; max-width: 80vw; /* Adjust max width for smaller screens */ overflow-y: auto; /* Allow vertical scrolling if needed */ max-height: 90vh; } /* Media Queries for Responsive Design */ /* Tablet and Larger Screens */ @media screen and (min-width: 768px) { .details-container { grid-template-columns: repeat(2, minmax(300px, 1fr)); } } /* Mobile Screens */ @media screen and (max-width: 767px) { .details-container { grid-template-columns: repeat(1, minmax(100%, 1fr)); } /* Full Screen Popup Adjustments */ .fullscreen-popup { padding: 20px; } .close-button { top: 5px; right: 5px; } .popup { width: 90%; max-width: 90vw; } } img{ height: 50%; width: 50%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;fullscreen-popup&#34;&gt; &lt;div class=&#34;popup-content&#34;&gt; &lt;h2&gt;This is title of h2&lt;/h2&gt; &lt;img src=&#34;https://wallpapers.com/images/hd/720p-nature-background-7dtz4pan3cr3ot5v.jpg&#34;&gt; &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.&lt;/p&gt; &lt;button class=&#34;close-button&#34;&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>试试这个</p> </answer> </body></html>

如何使我的 HTML 代码具有响应能力？是否需要弹性代码或响应式代码？

所以我正在制作一个新城市，而且我对 HTML 还比较陌生（但我很快就学会了），所以我从互联网上得到了很多帮助，哈哈。我已经磨练了大约一个星期了。对不对...

如何在移动设备上将视频 div 调整为 100% 宽度

当我使浏览器窗口变薄以复制移动设备大小时 - 图像会精细调整大小并填充 100% 宽度... 但我无法将视频发送到 填充 100% 宽度 与顶部对齐 - 由于某种原因

根据浏览器宽度正确调整特定位置的div的大小

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

如何使用 React Router 创建响应式主细节应用程序？

我在Github上为我的问题准备了一个简单的测试用例： 在 RouterLayout.jsx 中，媒体查询使 Outlet 在狭窄的屏幕上消失，正如您在动画屏幕截图中看到的那样，我在其中绘制了...

响应式 CSS 网格，具有固定行和最大列，但可以显示更多项目

我正在尝试创建一个布局为 2 行 x 列的网格组件。列最多可以有 6 个，并且网格项是未知数量的反应子项，因此有 x 列。 我的网格掉了...

视频嵌入在 Bootstrap 5 轮播中无法响应缩放

我在轮播中嵌入了两个视频。 一种是标准引导程序尺寸 (16x9)，另一种是自定义尺寸 (4x5) 我在两者上都使用了嵌入响应式代码，但它们都无法响应式扩展以适应...

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

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

将容器放置在桌面上“水平偏离中心”；为移动设备“集中”平滑缩小规模[关闭]

我正在尝试制作一个简单的响应式页面。 在移动设备上，事物会精细缩小、居中并适合窗口宽度。 在桌面上，容器和内容会放大到最大宽度，但都是...

响应式网页设计适用于桌面设备，但不适用于移动设备

响应式设计适用于检查元素模拟器，但在移动设备上，它不会显示所需的输出。 HTML： 响应式设计适用于检查元素模拟器，但在移动设备上，它不会显示所需的输出。 HTML： <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Esmaeeil enani</title> <link rel="stylesheet" type="text/css" media="screen" href="CVStyle.css" /> <!--Online Font Awesome Call--> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/> </head> CSS： @media only screen and (max-width: 1290px) { .skills .skill-item { margin-bottom: 30px; } } @media only screen and (max-width: 1024px) { } 代码还有更多内容，但这是简化版本。 这就是它在桌面上的样子（检查模式） 这就是它在移动设备 (iPhone) 上的外观 仅在 iPhone 设备上看起来很糟糕 问题在于 .grid css 规则。 您需要将 height:100% 更改为 min-height:100% 我有同样的问题。声明的初始代码 top: 0; left: 0; 它需要 top 的“什么” 即：顶部边距：0； 左边距：0； 我现在的问题为零。 无论教程、个人或视频向您展示什么内容，只需输入整个内容即可。

响应式设计：不同屏幕尺寸显示不同图像

我们的客户希望在小屏幕上与大屏幕上有不同的横幅图像。不仅仅是收缩/拉伸以适应，而且实际上替换了不同的图像。全尺寸图像相当

使用 HTML 选择多个项目 <select> 使用触摸屏

在多模式下使用 HTML ，如何使用触摸屏设备选择多个项目？ 拖放或滑动无法用于选择，已经用于滚动... 在 <select> 模式下使用 HTML multiple，如何启用 使用触摸屏设备选择多个项目？ 无法使用拖放或滑动进行选择，已用于滚动列表的滚动条 双击/双击已用于打开所选元素（例如，像在文件资源管理器中一样） 有内置的 HTML5 方法可以做到这一点吗？ select { width: 10em; height: 12em; } <select multiple> <option>Dog</option> <option>Cat</option> <option>Hamster</option> <option>Parrot</option> <option>Spider</option> <option>Goldfish</option> <option>Elephant</option> <option>Mouse</option> <option>Bee</option> <option>Sheep</option> <option>Fox</option> </select> 注意：这是 Android 上默认显示的方式，但我不想要这种设计，因为当我们不点击它时，我们看不到所选元素： 似乎没有原生 HTML5 方法可以帮助您。 您可以使用 select2 或类似的库，或者尝试这个（如果它适合您） 我们可以使用媒体查询隐藏正常选择，并在移动设备上选择其中的选项 document.addEventListener('DOMContentLoaded', () => { const dropBtn = document.getElementById('dropbtn'); const dropdownContent = document.getElementById('myDropdown'); dropBtn.addEventListener('click', () => { dropdownContent.hidden = !dropdownContent.hidden; }); window.addEventListener('click', (event) => { const tgt = event.target; const parent = tgt.closest('#myDropdown') if (!tgt.matches('#dropbtn') && !parent) { dropdownContent.hidden = true; } }); dropdownContent.addEventListener('click', (event) => { event.preventDefault(); const tgt = event.target.closest('a'); if (!tgt) return tgt.classList.toggle('active'); // we COULD select a hidden select here }); }); .dropdown { position: relative; display: inline-block; } .dropdown-content { position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a.active { background-color: lightblue; } <div class="dropdown"> <button id="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content" hidden> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div>

有没有办法让图像在调整大小和裁剪以适合移动设备时显示其右侧？

我正在制作一个网站，我有一个封面图片作为标头部分的背景。图像设置为background-size: cover。当网站针对移动设备进行缩放时，i 的右侧...

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

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

如何在 Xcode Story Board 中添加有关多设备的动态字体大小

我在storyBoard中添加了autoLayout（w：任意，h：任意） 但由于字体大小固定，所有设备上的字体大小都是相同的 （4、4.7、5.5 英寸） 4寸的看起来不错。但在 5.5 英寸，那就太...

电脑和移动设备上不同的英雄背景图片

在我的页面上，我有一个带有背景图像和标题的英雄部分。图像尺寸为 1920x500 像素。 在我的页面上，我有一个带有背景图像和标题的英雄部分。图片尺寸为1920x500px。 <section class="bgimage d-flex align-items-center " style="background-image:linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5)),url(https://mikulas.web87.hu/images/site_background/7304-1.jpg)"> <div class="container"> <div class="row"> <div class="col text-center"> <h1 class="bgimage_title text-white">Rendelés menete</h1> <!--<p class="bgimage_text text-white"></p>--> </div> </div> </div> </section> 在全高清显示器上，一切正常，但在移动和小型设备上，图像尺寸和位置不是最好的，所以我想更改图像。 您可以在这里查看我的页面： <ul class="bxslider"><li> <picture> <source media="(max-width: 991px)" srcset="https://mikulas.web87.hu/images/homepage_slideshow/18-1.jpg" /> <source media="(min-width: 992px)" srcset="https://mikulas.web87.hu/images/homepage_slideshow/300-1.jpg" /> <img src="https://mikulas.web87.hu/images/homepage_slideshow/300-1.jpg" alt="" /> </picture> </li></ul> 我只尝试搜索一些示例代码，但没有找到任何相关的代码，并给出了不同的图像。 我理解您的意思，如果您需要根据用户访问您网站的设备的大小使用不同的图像，我建议您使用 srcset 元素上的 img 属性。这是示例代码： /* Basic Section Styling */ section { position: relative; width: 100%; height: 200px; /* aspect-ratio: 16 / 9; You can use also use Aspect Ratio of 1920x1080 */ } /* This pseudo-class is for the overlay effect */ section::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5)); } /* This will be the image that will be displayed */ img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* This is to place the content above the image */ .container { position: relative; z-index: 1; } <section class="bgimage d-flex align-items-center"> <img src="https://placehold.co/3200x800.png" srcset=" https://placehold.co/800x200.png 800w, https://placehold.co/1600x400.png 1600w, https://placehold.co/3200x800.png 3200w " /> <!-- 1st URL image will be shown if the screen size is equal or less than 800px --> <!-- 2nd URL image will be shown if the screen size is equal or less than 1600px --> <!-- 3rd URL image will be shown if the screen size is equal or less than 3200px --> <!-- You will put your image URL with the desired width of the screen --> <div class="container"> <div class="row"> <div class="col text-center"> <h1 class="bgimage_title text-white">Rendelés menete</h1> <!-- Your rest of the content goes here --> </div> </div> </div> </section> 注意事项： 如果您已经加载了浏览器第一次重新加载的较大图像，之后缩小屏幕尺寸不会将图像变回小尺寸，并且将保持大尺寸 如果您想查看小图像，则必须硬重新加载浏览器（Ctrl + F5）以从浏览器缓存中清除图像。 用户屏幕尺寸显然不可调整，因此如果他们首先在小屏幕上打开它，这不会给用户带来任何问题。 如果您想了解srcset如何工作的详细信息和完整解释，我强烈建议您阅读此博客，我也使用此博客作为回答您问题的参考。 博客链接和信用转到：https://blog.webdevsimplified.com/2023-05/responsive-images/

CSS 中的 Flexbox 两列

我在一个部分中有两列。 图像中的第一列。 第二列只是文本。 我希望这些能够弯曲。 问题是，当我尝试柔性包裹续集时，图像变得太小......

引导响应式表格内容包装

我有与此类似的 HTML： 公告 我有与此类似的 HTML： <div class="table-responsive"> <table class="table borderless"> <caption> <h3>Announcements</h3> </caption> <tbody> <tr > <td> If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc. </td> </tr> </tbody> </table> </div> 当我在小视口中查看输出时，表格会正确调整大小，但表格单元格中的段落内容不会换行，因此会显示滚动条。我预计响应行为会包裹段落内容。我该如何实现这一目标？ 只需简单地使用如下所示，它就会自动换行表格中的任何长文本。不需要别的 <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> 因此您可以使用以下内容： td { white-space: normal !important; // To consider whitespace. } 如果这不起作用： td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } 我遇到了与您相同的问题，但上述答案没有解决我的问题。我能够解决这个问题的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为示例，我在下面提供了一个片段 - 但我发现您需要针对相关表格调整它 - 因为我通常根据布局使用多个 colspan。我认为 Bootstrap 失败的原因是因为它消除了包装约束以获得滚动条的完整表格。 colspan 一定是把它绊倒了。 <style> @media (max-width: 768px) { /* use the max to specify at each container level */ .specifictd { width:360px; /* adjust to desired wrapping */ display:table; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } 我希望这有帮助 该行为是故意的： 通过将任何 .table 包装在 .table-responsive 中来创建响应式表格使它们在小型设备上水平滚动（768px 以下）。当查看宽度大于 768 像素的任何内容时，您不会在这些表格中看到任何差异。 这意味着表格默认是响应式的（正在调整其大小）。但前提是您希望在没有足够空间时不破坏表格线条并添加滚动条，请使用 .table-responsive 类。 如果您查看 bootstrap 的源代码，您会注意到有一个媒体查询仅在 XS 屏幕尺寸上激活，并将表格文本设置为 white-space: nowrap，这会导致其不会中断。 TL;博士;解决方案 只需从 html 代码中删除 .table-responsive 元素/类即可。 编辑 我认为你的桌子一开始没有响应的原因是你没有包装像这样的 .container、.row 和 .col-md-x 类 <div class="container"> <div class="row"> <div class="col-md-12"> <!-- or use any other number .col-md- --> <div class="table-responsive"> <div class="table"> </div> </div> </div> </div> </div> 有了这个，您仍然可以使用 <p> 标签，甚至使其响应。 请参阅 Bootply 示例此处 UberNeo 的回复是好的，我喜欢它，因为除了 TD 之外，你不需要修改任何其他内容。唯一的一点是，您还必须在样式中添加“white-space:normal”，以保持表格的响应特性，如果没有，在某些分辨率下，不会进行换行，表格也不会滚动出现。 style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;" .table td.abbreviation { max-width: 30px; } .table td.abbreviation p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table class="table"> <tr> <td class="abbreviation"><p>ABC DEF</p></td> </tr> </table> 那么好吧。您可以使用 CSS 自动换行属性。像这样的东西： td.test /* Give whatever class name you want */ { width:11em; /* Give whatever width you want */ word-wrap:break-word; } 在 css 外部文件中使用它。 .td-table { word-wrap: break-word; word-break: break-all; white-space: normal !important; text-align: justify; } 就这样做 style="word-wrap: break-word min-width:; max-width:;" 然后设置你想要的width 在 Bootstrap 5.0 中这样做： <td class="w-50 text-break">teeeeeeeeeeeeeeest</> 您可以根据文档使用w-25或其他东西 在 bootstrap 5 及以上版本中： 2024 年 3 月 5 日 下午 4:20 文字现在可以正常换行。 使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码 $(".tableresp").on('click', '.dropdown-toggle', function(event) { if ($('.dropdown-menu').length) { var elm = $('.dropdown-menu'), docHeight = $(document).height(), docWidth = $(document).width(), btn_offset = $(this).offset(), btn_width = $(this).outerWidth(), btn_height = $(this).outerHeight(), elm_width = elm.outerWidth(), elm_height = elm.outerHeight(), table_offset = $(".tableresp").offset(), table_width = $(".tableresp").width(), table_height = $(".tableresp").height(), tableoffright = table_width + table_offset.left, tableoffbottom = table_height + table_offset.top, rem_tablewidth = docWidth - tableoffright, rem_tableheight = docHeight - tableoffbottom, elm_offsetleft = btn_offset.left, elm_offsetright = btn_offset.left + btn_width, elm_offsettop = btn_offset.top + btn_height, btn_offsetbottom = elm_offsettop, left_edge = (elm_offsetleft - table_offset.left) < elm_width, top_edge = btn_offset.top < elm_height, right_edge = (table_width - elm_offsetleft) < elm_width, bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height; console.log(tableoffbottom); console.log(btn_offsetbottom); console.log(bottom_edge); console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height); var table_offset_bottom = docHeight - (table_offset.top + table_height); var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top; var bottomedge = touchTableBottom > table_offset_bottom; if (left_edge) { $(this).addClass('left-edge'); } else { $('.dropdown-menu').removeClass('left-edge'); } if (bottom_edge) { $(this).parent().addClass('dropup'); } else { $(this).parent().removeClass('dropup'); } } }); var table_smallheight = $('.tableresp'), positioning = table_smallheight.parent(); if (table_smallheight.height() < 320) { positioning.addClass('positioning'); $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static'); } else { positioning.removeClass('positioning'); $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative'); }