responsive-design 相关问题

HTML、SCSS、JSX、React、灵活网格

我需要这种使用灵活网格方法的方法，其中 768px 和 1024px 媒体屏幕的用户应该能够查看此处的确切输出，并且在移动应用程序视口上应该是...

我不知道为什么我的网站没有响应

我是 HTML 和 CSS 的初学者，我正在开发一个关于前端导师的项目。 该项目的名称是 Order Summary Component，我已经提交了该项目，但问题是我的

这两种网格居中对齐内框的CSS有什么区别[重复]

我已经使用 CSS 网格编写了两个片段来居中对齐内部框，但无法理解其中的区别。 我知道我们还有其他方法可以做，但很想知道确切的区别

Flutter：响应式 Web - 列中的多个列表视图

我正在开发一个flutter web应用程序，需要在一个列中放置多个列表视图。 我正在尝试使用响应式框架。但它似乎不适用于我的项目。我尝试过 Wrap widge...

如何在 React Native 中处理响应式布局

我正在使用react-native-dimension库来使我的UI响应如下： const{宽度,高度} = Dimensions.get('窗口'); 在我的 style.js 文件中： 图像背景景观：{ 宽度：

使图像始终在固定容器内完全且响应式地显示？

我有以下html： 以及以下样式： 。我 { 位置：固定； 高度：100...

将图像拉伸到视口保持纵横比，而不使用对象拟合

我需要在具有相同尺寸的图像上放置一个覆盖层。为此，我使用了绝对定位的同级 div。 我不能使用 object-fit: contains 因为它不会减少尺寸...

在 Angular 应用程序中使用断点时，动态类不适用于 Tailwind CSS 网格布局

我在 Angular 应用程序中使用 Tailwind CSS。在我的网格布局中，我尝试动态添加 col-span- 的值。如果我使用动态值而不使用任何媒体查询断点，例如 lg，...

如何让flutter应用的所有页面响应式？

如何让我的所有页面在 Flutter 应用程序中响应？我应该在每个页面中实现响应式布局代码还是会从其父级（main.dart）继承响应式布局？有...

移动视图媒体查询被我的平板电脑媒体查询覆盖。为什么？

当我使用移动视图时，平板电脑视图媒体查询始终会覆盖我的移动媒体查询。为什么会发生这种情况？ 我就是这样添加的。 /* X-Small 设备（竖屏手机，小于 576px） */ @我...

如何将多个元素包装在一个边框不延伸到页面整个宽度的 Flexbox 容器中？

我对此很陌生。我正在尝试为多个元素制作一个弹性盒容器，其边框不跨越页面的整个宽度，而是环绕元素，无论它们的“f...

为什么我的背景图像在移动设备上滚动时会调整大小？

出于某种原因，在移动设备上滚动页面时，带有背景图像的 div 会被放大。我用谷歌搜索了一下，似乎其他人也有这个问题，但我没有找到令人满意的解决方案......

使用 CSS 网格时防止内容溢出

𝐓𝐡𝐞𝐫𝐞𝐜𝐮𝐫𝐫𝐞𝐧𝐭𝐩𝐫𝐨𝐛𝐥𝐞𝐦𝐈𝐤𝐞𝐞𝐩𝐟𝐚 𝐜𝐢𝐧𝐠： 我有一个主容器，里面嵌套了 2 个 div（我们称它们为左和右）。 CSS 网格应用于主容器...

当我们减小设备宽度时，1 列弹性布局不响应

下面的弹性布局可以工作，但是当我们减少设备宽度时（例如：Chrome开发者工具，触摸设备模拟），它不会减少其宽度，并且不会使列以wh居中...

使用媒体查询在移动设备上隐藏引导工具提示

我在网站上的按钮上使用 Bootstrap 的工具提示，但在移动设备上查看时，这些工具提示会在第一次单击时触发，这意味着我必须双击该按钮。我想要

页脚未覆盖页面宽度的 100%

我有一个页面，其中包含以下页脚代码 。页脚 { 显示：柔性； 对齐项目：居中； 宽度：100%； 保证金：0； 高度：100%； 背景颜色：黑色； 颜色: 素瓷; 字体大小：20px； } 我知道我...

响应式网页设计不响应

我正在尝试通过移动优先来创建一个响应式网站。当我开始添加媒体查询（最小宽度）时，我会切换 Google 上的检查元素以查看它是否响应。 我

强制引导响应图像为正方形

图像是在循环中创建的： 图像是在循环中创建的： <div id="row"> <div class="col-sm-6"> <div id="row"> <?php foreach ($products as $product) { ?> <div class="col-sm-6"> <a href="/admin/product/" class="thumbnail"> <div class="caption"> title<br> 10 x viewed </div> <img src="/assets/img/product/<?php echo $product['img'] ?>" class="img img-responsive full-width" /> </a> </div> <?php } ?> </div> </div> </div> 图像具有不同的尺寸有些比宽度高，有些比高度更宽。我怎样才能在响应的同时强制所有图像具有相同的高度。 他们可以使用宽度：100％，但我不能使用高度：自动，比例将保持不变。 我应该怎么做才能使我的图像平方，同时它们有响应并且我不知道％。 比如，绿衬衫的高度没有他的宽度 我想在没有 jquery 的情况下做到这一点，所以只使用 CSS！ 你可以这样做： 用 padding-bottom:100%; overflow:hidden; position:relative 将图像包裹在容器中 将图像绝对放置在该容器内。 小提琴 说明： Padding top/bottom（如 margin top/bottom）是根据父元素的宽度计算的。由于 .image div 与其父元素具有相同的宽度，因此设置 padding-bottom:100%; 使其高度与其宽度相同，因此它是正方形（其内容需要绝对定位或浮动，这样就不会改变父级的大小）。 HTML： <div class="col-sm-6"> <a href="#" class="thumbnail"> <div class="caption"> title<br/>3 x bekeken </div> <div class="image"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> CSS： .image{ position:relative; overflow:hidden; padding-bottom:100%; } .image img{ position:absolute; } 这是各种尺寸图像的最佳解决方案 http://jsfiddle.net/oboshto/p9L2q/53/ HTML 相同： <div class="col-sm-6"> <a href="#" class="thumbnail"> <div class="caption"> title<br/>3 x bekeken </div> <div class="image"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> 新CSS： .image{ position:relative; overflow:hidden; padding-bottom:100%; } .image img{ position: absolute; max-width: 100%; max-height: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } 您可以将每个图像包装在一个 div 中，然后将 div 的溢出设置为隐藏。只要 div 是方形的，那么您的图像就会被裁剪。 div 也可以响应。 类似帖子 这个链接对我有用。JSFiddle 不用使用 <div><img/></div>，而是使用 background-position; background-size; background-repeat 就能达到目的。 web-tiki 答案几乎对我有用，对于更大的图像，我必须添加此 HTML 和 CSS 以使它们在正方形内居中： .image{ position:relative; overflow:hidden; padding-bottom:100%; } .image img{ position:absolute; width: 100%; height: 100%; object-fit: cover; }<div class="col-sm-6"> <a href="#" class="thumbnail"> <div class="caption"> title<br/>3 x bekeken </div> <div class="image"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> 在我看来，这是一个符合 Bootstrap 精神的解决方案： <div class="ratio ratio-1x1"> <img class="img-fluid src="my_image.png" /> </div> 在 Bootstrap 5.3 上进行了测试，但 Bootstrap 5 中已经支持这种方式，并且 Bootstrap 4 中也以不同的模式支持。

如何使<svg>元素展开或收缩到其父容器？

的目标是让 元素扩展到其父容器（在本例中为 ）的大小，无论该容器有多大或多小。 代码： 是...</desc> <question vote="121"> <p>目标是让 <pre><code>&lt;svg&gt;</code></pre> 元素扩展到其父容器的大小，在本例中为 <pre><code>&lt;div&gt;</code></pre>，无论该容器有多大或多小。</p> <p>代码：</p> <pre><code>&lt;style&gt; svg, #container{ height: 100%; width: 100%; } &lt;/style&gt; &lt;div id=&#34;container&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; version=&#34;1.1&#34; &gt; &lt;rect x=&#34;0&#34; y=&#34;0&#34; width=&#34;100&#34; height=&#34;100&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; </code></pre> <p>此问题最常见的解决方案似乎是在 <pre><code>viewBox</code></pre> 元素上设置 <pre><code>&lt;svg&gt;</code></pre> 属性。 </p> <pre><code>viewBox=&#34;0 0 widthOfContainer heightOfContainer&#34; </code></pre> <p>但是，在 <pre><code>&lt;svg&gt;</code></pre> 元素内的元素具有预定义宽度和/或高度的情况下，这似乎不起作用。例如，上面代码中的 <pre><code>&lt;rect&gt;</code></pre> 元素显式设置了其宽度和高度。</p> <p>因此，显而易见的解决方案是在这些元素上也使用％宽度和％高度。但这是必须要做的吗？特别是，因为 <pre><code>&lt;img src=test.svg &gt;</code></pre> 工作正常并且扩展/收缩没有任何问题，明确设置 <pre><code>&lt;rect&gt;</code></pre> 高度和宽度。</p> <p>如果像 <pre><code>&lt;rect&gt;</code></pre> 这样的元素以及其他类似的元素必须以百分比定义其宽度和高度，那么 Inkscape 中是否有一种方法可以设置它，以便所有具有 <pre><code>&lt;svg&gt;</code></pre> 文档的元素都使用百分比宽度、高度、等等..而不是固定尺寸？</p> </question> <answer tick="false" vote="55"> <p><pre><code>viewBox</code></pre>不是容器的高度，而是绘图的大小。将 <pre><code>viewBox</code></pre> 的宽度定义为 100 个单位，然后将 <pre><code>rect</code></pre> 定义为 10 个单位。之后，无论您将 SVG 缩放到多大，<pre><code>rect</code></pre> 都将是图像宽度的 10%。</p> </answer> <answer tick="false" vote="31"> <p>假设我有一个如下所示的 SVG： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZzamJrLmpwZw==" alt="pic1"/> </p> <p>我想将它放在一个 div 中并使其响应式地填充 div。我的做法如下：</p> <p>首先，我在 inkscape 等应用程序中打开 SVG 文件。在“文件”->“文档属性”中，我将文档的宽度设置为 800px，高度设置为 600px（您可以选择其他尺寸）。然后我将 SVG 放入此文档中。</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1lSckZVLmpwZw==" alt="pic2"/></p> <p>然后我将此文件另存为新的 SVG 文件，并从该文件中获取路径数据。 现在，在 HTML 中，实现神奇效果的代码如下：</p> <pre><code>&lt;div id=&#34;containerId&#34;&gt; &lt;svg id=&#34;svgId&#34; xmlns:svg=&#34;http://www.w3.org/2000/svg&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; version=&#34;1.1&#34; x=&#34;0&#34; y=&#34;0&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 800 600&#34; preserveAspectRatio=&#34;none&#34;&gt; &lt;path d=&#34;m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z&#34; fill=&#34;#f00&#34;/&gt; &lt;/svg&gt; &lt;/div&gt; </code></pre> <p>请注意，SVG 的宽度和高度都设置为 100%，因为我们希望它垂直和水平填充容器，但 viewBox 的宽度和高度与 inkscape 中文档的宽度和高度相同，即 800px X 600 像素。您需要做的下一件事是将preserveAspectRatio 设置为“none”。如果您需要了解有关此属性的更多信息，这里有一个很好的<a href="http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg" rel="noreferrer">链接</a>。这就是全部内容。</p> <p>还有一件事是，这段代码适用于几乎所有主要浏览器，甚至是旧浏览器，但在某些版本的 android 和 ios 上，您需要使用一些 javascrip/jQuery 代码来保持一致。我在文档准备和调整大小功能中使用以下功能：</p> <pre><code>$(&#39;#svgId&#39;).css({ &#39;width&#39;: $(&#39;#containerId&#39;).width() + &#39;px&#39;, &#39;height&#39;: $(&#39;#containerId&#39;).height() + &#39;px&#39; }); </code></pre> <p>希望有帮助！</p> </answer> <answer tick="false" vote="9"> <p>最近对我有用的是从 <pre><code>height=&#34;&#34;</code></pre> 标签和所有子标签中删除所有 <pre><code>width=&#34;&#34;</code></pre> 和 <pre><code>&lt;svg&gt;</code></pre> 属性。然后，您可以使用父容器高度或宽度的百分比进行缩放。</p> <p>之前：</p> <pre><code>&lt;svg width=&#34;3212&#34; height=&#34;3212&#34; viewBox=&#34;0 0 3212 3212&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; circle cx=&#34;1606&#34; cy=&#34;1606&#34; r=&#34;1387&#34; stroke=&#34;black&#34; stroke-width=&#34;438&#34;/&gt; &lt;/svg&gt; </code></pre> <p>之后：</p> <pre><code>&lt;svg viewBox=&#34;0 0 3212 3212&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; circle cx=&#34;1606&#34; cy=&#34;1606&#34; r=&#34;1387&#34; stroke=&#34;black&#34; stroke-width=&#34;438&#34;/&gt; &lt;/svg&gt; </code></pre> </answer> <answer tick="false" vote="3"> <p>@robertc 说得对，但您还需要注意，<pre><code>svg, #container</code></pre> 会导致 svg 以指数方式缩放，但不是 100%（一次为 <pre><code>#container</code></pre>，一次为 <pre><code>svg</code></pre>）。</p> <p>换句话说，如果我对两个元素应用 50% h/w，它实际上是 50% 的 50%，或 0.5 * 0.5，等于 0.25 或 25% 比例。</p> <p>按照 @robertc 的建议使用时，一个选择器可以正常工作。</p> <pre><code>svg { width:50%; height:50%; } </code></pre> </answer> <answer tick="false" vote="2"> <p>对于您的 iPhone，您可以在头部应答器中使用：</p> <pre><code>&#34;width=device-width&#34; </code></pre> </answer> <answer tick="false" vote="0"> <p>我成功地缩放到窗口大小，如下所示。其中一个子集是扩展到父级。破坏我尝试过的数十种方法的复杂因素是有 2-3 个 SVG 区域需要随着浏览器窗口的变化而缩放。这也使用顺风。</p> <pre><code>&lt;body&gt; &lt;div class=&#34;w-full h-screen p-2&#34;&gt; &lt;svg class=&#34;w-full h-2/4&#34; viewBox=&#34;0 0 100 100&#34; preserveAspectRatio=&#34;none&#34;&gt; &lt;rect class=&#34; fill-red-950 &#34; x=&#34;0&#34; y=&#34;0&#34; width=100 height=100 /&gt; &lt;/svg&gt; &lt;div class=&#34;h-2/4&#34;&gt; &lt;div class=&#34;w-full h-full&#34;&gt; &lt;svg class=&#34;w-full h-full&#34; viewBox=&#34;0 0 100 100&#34; preserveAspectRatio=&#34;none&#34;&gt; &lt;rect class=&#34;fill-yellow-400 &#34; x=&#34;0&#34; y=&#34;0&#34; width=100 height=100 /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>w-full 适用于宽度，但我需要 h-screen 来获取屏幕高度。 接下来，您使用 h-2/4 之类的方案来共享垂直空间。在嵌套 div 中继续执行 w-full h-full 非常重要，直到到达需要相同的 svg。</p> <p>如果您需要对 CSS 样式进行逆向工程，请参阅 <a href="https://tailwindcss.com/docs/height" rel="nofollow noreferrer">Tailwind 文档</a>，了解此处类内使用的各种选项。类似的方法可以水平使用，但比垂直有更多的选择。 CSS 百分比或 Flex 或网格等</p> </answer> </body></html>

台式机、笔记本电脑和平板电脑横向上的 WordPress 导航菜单断点问题

我正在尝试使导航菜单在我的 WordPress 网站上响应式工作，但遇到以下问题： 我有一个两列标题，50/50 盒装结构 - 左侧是日志...