responsive-design 相关问题

如何针对不同的视口尺寸将下拉内容与其按钮对齐？

我不断更改下拉内容的位置，以便它们可以与按钮对齐，但我需要让它们粘在一起，以便在不同的视口上，我不必更改它们的位置...

尝试将 CSS 网格转换为 Bootstrap5 响应式网格，为什么列没有显示为框？

所以，这是学校的作业，几天来我一直在努力解决这个问题。 这个作业的目标是：用 Bootstrap 5 替换 CSS 网格。布局的每个部分都需要使用

桌面模拟站点：如何在响应式桌面模拟站点中结合display: flex in grid system和JavaScript编写的选择工具？

我正在使用纯 HTML、CSS 和 JavaScript 开发桌面模拟网站。我使用 display: flex 和 JavaScript 创建了一个网格系统，允许用户在桌面上移动快捷方式 (

使用 CSS 自动缩放 div 以适应其父元素

我有多个 div，里面有一个背景图片。此背景图像具有一定的高度和宽度，并且在其上方放置了绝对元素。 要求是需要制作背景...

如何在弹性容器上没有固定大小的情况下为溢出的弹性项目创建滚动条？

假设我们有一些 HTML 代码，如下所示： // 我将其更改为一些固定值，例如 1500px，但没有任何变化 假设我们有一些如下所示的 HTML 代码： <div id="root" style="max-width: 85%"> // I changed this to some fixed value like 1500px but nothing changed <div id="main" style="width: 100%"> <div id="container" style="display: flex; max-width: 100%; overflow: scroll;"> <div style="width: 500px; height: 500px">1</div> <div style="width: 500px; height: 500px">2</div> <div style="width: 500px; height: 500px">3</div> <div style="width: 500px; height: 500px">4</div> <div style="width: 500px; height: 500px">5</div> <div style="width: 500px; height: 500px">6</div> <div style="width: 500px; height: 500px">7</div> <div style="width: 500px; height: 500px">8</div> <div style="width: 500px; height: 500px">9</div> </div> </div> </div> 问题是我希望弹性项目在超过其容器大小时具有水平滚动，但它们以我定义的方式溢出。我搜索了但没有找到任何东西。任何帮助将不胜感激。 编辑： 我不得不提到我不想将 flex 容器宽度设置为某个固定值，因为响应性否则在那种情况下它工作正常 <div id="root" style="max-width: 85%"> <div id="main" style="width: 100%"> <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </div> </div> <style> #container { display: flex; flex-wrap: nowrap; overflow-x: auto; } #container > div { flex: 0 0 auto; width: 500px; height: 500px; margin-right: 10px; } </style>

在这个例子中，当 srcset 中有更好的图像时，为什么 Chrome 会选择更大的图像？

我正在尝试了解响应式图像的基础知识。 我有这个非常简单的网页： http://chubby-orange-fox.s3-website.eu-north-1.amazonaws.com/test.html ...

如何在表格底部制作 div？

如何在 html 表格的底部制作一个 div？ 姓名 如何在 html 表格的底部制作一个 div？ <table style="width:100px;" > <thead class="text-center"> <th>Name</th> <th>Marks</th> </thead> <tbody> <tr> <td>Nikhil</td> <td>60<br>Average</td> </tr> <tr> <td>Akhil</td> <td>90<br>Excellent</td> </tr> <tr> <td>Alan</td> <td>40<br>Poor</td> </tr> </tbody> </table> 供参考，我附上了图片。 TIA 你不需要一个 div，你可以只使用一个 tfoot，它用于定义一组总结表格列的行： <table style="width:100px;"> <thead class="text-center"> <th>Name</th> <th>Marks</th> </thead> <tbody> <tr> <td>Nikhil</td> <td>60</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>Average</td> </tr> </tfoot> </table> 另外，还可以通过colspan属性展开平均行： <table style="width:100px;"> <thead class="text-center"> <th>Name</th> <th>Marks</th> </thead> <tbody> <tr> <td>Nikhil</td> <td>60</td> </tr> </tbody> <tfoot> <tr> <td colspan="2" style="text-align: right;">Average</td> </tr> </tfoot> </table> <table style="width:100px;" > <thead class="text-center"> <th>Name</th> <th>Marks</th> </thead> <tbody> <tr> <td>Nikhil</td> <td>60</td> </tr> <tr> <td>Danixal</td> <td>71</td> </tr> <tr> <td>Clarke</td> <td>39</td> </tr> </tbody> <tfoot> <td></td> <td><div>Average</div></td> </tfoot> </table>

带有 minmax() 的响应式网格在使用网格区域时不起作用

我想实现一个三列两行的响应式网格布局，其中最后一列横跨两行并且包含一张图片，如下图： 具体来说，我希望图像移动到

带有 minmax() 的响应式网格在跨行时不起作用

我想实现一个三列两行的响应式网格布局，其中最后一列横跨两行并且包含一张图片，如下图： 具体来说，我希望图像移动到

bootstrap5 中依赖于类名的自定义断点

我正在使用一个使用引导程序的现有站点，主要用于响应类。我们需要在主要内容的右侧添加一个侧面板。侧面板并不总是可见的，...

Tailwind CSS 响应式类不适用于 Laravel 和 Jetstream

我有以下 HTML： 我有以下 HTML： <div class="py-2"> <div class="bg-white dark:bg-gray-800 sm:rounded-lg"> <div class="p-6 text-gray-900 dark:text-gray-100"> <div class="grid grid-cols-7 md:grid-cols-3 sm:grid-cols-2 gap-4 m-1"> <div class="">c</div> <div class="">d</div> <div class="">e</div> </div> </div> </div> </div> 这里只有md:grid-cols-3并排显示div，如果我给出大于3的任何东西，比如md:grid-cols-4，它会在不同的行中显示每个div。此外，它不会触发任何其他断点，因此如果我在 DevTools 中选择响应模式，我可以看到应用了 md:grid-cols-3 并且它显示相同的三个网格而不是 2 个。我正在使用 Tailwind 与 Laravel 和 Jetstream 我该如何解决这个问题？如果未指定grid-cols-7，它也不会采用md:grid-cols-3。 据我所知，md: 会覆盖大于一定数量像素的所有内容，这就是它覆盖 grid-cols-7 的原因，因为屏幕可能大于设定的 px 宽度。对于sm:也是如此，它设置了一个像if screen is bigger in width than x pixels do style这样的条件，所以它会覆盖你设置的其他样式，基本上你可以想象它是从下到上的。

Jetpack compose 布局在不同的手机屏幕尺寸上没有响应

我设计了一个屏幕并在Pixel 5a屏幕上进行了测试，一切都适合屏幕。但是在诺基亚手机上测试同一个应用程序，按钮变大了，边距变大了， 没有什么是规模...

为什么我不能使用带有此媒体查询的 html 选择器更改背景颜色？

html, .large { 字体大小: 36px; 颜色：#ffffff； 背景色：#000000； } /* 这不起作用 @media(max-width: 600px) { html { background-color: lightblue; } */ ...

为不同的孩子组合div边框和边框半径

我正在做一个项目，我必须在看起来像这样的 div 之间创建边界线 --Design-jpeg 但到目前为止，我在这里达到了 output-jpeg 我无法正确合并它们的地方 CSS代码 导出...

为什么这个简单的 css 查询不会改变背景颜色

我想测试 css 查询（最小宽度和最大宽度），我写了这个： 身体{ 背景颜色：红色； } @media only screen and (max-width: 600px){ ...</desc> <question vote="0"> <p>我想测试 css 查询 (<pre><code>min-width</code></pre> & <pre><code>max-width</code></pre>) 我写了这个：</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; body{ background-color:red; } @media only screen and (max-width: 600px){ body{ backgroud-color:#F00; } } @media only screen and (max-width: 900px) and (min-width: 600px){ body{ backgroud-color:#FF0; } } @media only screen and (min-width: 900px){ body{ backgroud-color:#0F0; } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>所以它应该显示为<a href="https://quera.org/qbox/view/HjIz2smgrI/responsive.gif" rel="nofollow noreferrer">this</a>.</p> <p>但它根本不改变背景！</p> <p>当涉及到某些像素时，这段代码不改变背景颜色有什么问题，而我已经定义了相关条件？</p> <p>我很欣赏关于这个的任何想法......</p> </question> <answer tick="true" vote="0"> <p>因为您使用的是 <pre><code>backgroud-color</code></pre> 而不是缺少 n 的 <pre><code>background-color</code></pre>。 试试这段代码，它应该可以正常工作：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>body { background-color: red; } @media only screen and (max-width: 600px) { body { background-color: #F00; } } @media only screen and (max-width: 900px) and (min-width: 600px) { body { background-color: #FF0; } } @media only screen and (min-width: 900px) { body { background-color: #0F0; } }</code></pre> <pre><code>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt;&lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

使用视图宽度和高度定位的问题

我正在尝试解决 React 挑战。挑战是当你点击屏幕上的某个地方时，你点击的地方会出现一个圆圈。您还有一个重做和撤消按钮。问题发生在

Brad Frost 在响应式设计中建议的原子设计中的大小间距思考和实现方法

我知道这是非常抽象的问题，但是在遵循原子设计时我无法想象空间（填充，边距）和大小（宽度，高度）。 我能理解原子、分子的意图，

这是我的 html 文档链接，具有响应式引导程序布局，但没有按预期显示，我不知道为什么

<head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <div class="container">            <div class="row">             <div class="col-12"> <div class="text-center">     <h1>Our Menu</h1> </div> </div> </div>                 </div>         <div class="row">             <div class="col-12 col-lg-6">                 <h2>Falafel</h2>                 <p>Chickpea, herbs, spices.</p>                 <h2>Fried Calamari</h2>                 <p>Squid, buttermilk.</p>             </div>             <div class="col-12 col-lg-6">                 <h2>Pasta Salad</h2>                 <p>Lettuce, vegetables, mozzarella.</p>                 <h2>Greek Salad</h2>                 <p>Cucumbers, onion, feta cheese.</p>             </div>         </div>  </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body 在第二行，它应该由 2 列组成，类“col-12”和“col-lg-6”意味着当屏幕在 xs 和更大直到 lg 时，每列应该有 12 列（根据引导网格系统) 并且当 screen 被认为是 lg（大屏幕）时，每列应该占据 12 列布局的一半。但它没有用，第二列有不同的边距（左边）。这有什么问题吗？ 实际上，它看起来应该如此——你有一行 col-12 占据了所有的宽度和两列下方的行，如果屏幕变小，它会将所有项目包装到一列。 https://codepen.io/Aerogirl/pen/mdGmaoa 你能告诉我这个代码笔是不是你得到的/你想要的吗？ 也许您的引导程序未正确加载（检查浏览器的控制台）或者它只是在这里可见>中缺少</body？

使用视图宽度和高度定位的问题

我正在尝试解决 React 挑战。挑战是当你点击屏幕上的某个地方时，你点击的地方会出现一个圆圈。您还有一个重做和撤消按钮。问题发生在

在我的网页中，我在我的推荐部分使用了猫头鹰轮播，其中评级图标设计因移动设备而异

在我的网页中，我在我的推荐部分使用了猫头鹰轮播，其中评级图标设计因移动设备而异。这是我的代码“navbar.unitechnocompany ...