responsive-design 相关问题

我的移动导航在 gitpages 和运行 index.html 上都无法点击，但可以在 VS code liveserver 中使用

我正在制作一个网站，但我无法在移动设备上点击导航，它在 VS Code liveserver 中工作得很好，在其他地方都没有。 尝试制作我的第一个移动导航，汉堡图标

开发只针对手机和平板的flutter App时是否应该考虑Windows和Web的响应能力？

我正在开发一款适用于手机和平板电脑的应用程序，该应用程序将部署在 Play Store 和 Apple Store 上。我对某事感到困惑。众所周知，应用程序可以在 Windows 和 Web 上调整大小，但我们...

如何创建适应不同屏幕尺寸的响应式对角背景渐变？

我正在尝试创建一个响应式背景渐变，该渐变在整个页面上对角延伸。渐变应适应不同的屏幕尺寸，保持其对角线方向和比例...

在 Flutter 中创建具有水平直线的自定义剪辑路径

问题： 我目前正在使用 CustomClipper 在 Flutter 中实现自定义剪辑路径，但我面临一个问题，形状中的水平线渲染不完美...

如何在 JS/HTML/CSS 中为 Web 应用程序创建日期选择器滚轮？

我的目标 我正在尝试实现这个滚轮/鼓轮/ios 日期选择器样式元素。它将放置在顶部并切换整个页面，加载特定日期的内容。页面本身...

我在 w3school 的帮助下编写了一段代码来根据屏幕尺寸更改我的网络响应能力。但它并没有像我想象的那样工作

。左右 { 宽度...</desc> <question vote="-1"> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt; &lt;!--Media Queries--&gt; &lt;style&gt; .left, .right { width: 30%; float: left; text-align: center; background-color: violet; } .main { width: 40%; float: left; text-align: center; background-color: chartreuse; } @media only screen and (max-width:800px) { .left, .right, .main { width: 100; } }&lt;!-- I have problem in this part (media queries)--&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;left&#34;&gt; &lt;p&gt;Left Content&lt;/p&gt; &lt;/div&gt; &lt;div class=&#34;main&#34;&gt; &lt;p&gt;Main Content&lt;/p&gt; &lt;/div&gt; &lt;div class=&#34;right&#34;&gt; &lt;p&gt;Right Content&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>请帮助我解决媒体查询部分。我尝试了很多方法来解决这个问题，但没有成功。当我减小屏幕尺寸时，它也不会垂直对齐。它始终水平对齐。</p> </question> <answer tick="false" vote="0"> <p>我们只需向 <pre><code>100</code></pre> 添加一个单位即可。给你了：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt; &lt;!--Media Queries--&gt; &lt;style&gt; .left, .right { width: 30%; float: left; text-align: center; background-color: violet; } .main { width: 40%; float: left; text-align: center; background-color: chartreuse; } @media only screen and (max-width:800px) { .left, .right, .main { width: 100%; } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;left&#34;&gt; &lt;p&gt;Left Content&lt;/p&gt; &lt;/div&gt; &lt;div class=&#34;main&#34;&gt; &lt;p&gt;Main Content&lt;/p&gt; &lt;/div&gt; &lt;div class=&#34;right&#34;&gt; &lt;p&gt;Right Content&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

为什么我在进行响应时会出现这个空白 <768px?

当我尝试超过 768px 时，一切看起来都很好，但是当我尝试在手机中进行响应式设计时，它会产生空白问题。我不知道空白是怎么出现的

影响网页宽度的边距和填充

我正在努力通过重新制作已经制作的网站来扩展我的投资组合，在这个网站中，我在保存页脚信息的 div 上放置的边距和填充似乎导致了整个续...

尝试根据两个媒体查询显示两个不同的图像

我在这里遇到了一个问题，我不知道如何解决它。 我有一个带有图像的标题“topo”。 我希望在我的桌面和平板电脑版本中使用该图像，但在我的智能手机媒体查询中使用

如何进行文本列的水平滚动导航？

我对这个游戏有点陌生。我真的很困惑，如果您有 5 分钟的时间，我希望得到一些指导。 我认为屏幕截图足够清晰，可以看到我在说什么，但我想做......

Tailwind 中如何设置元素显示在中屏及以下？

我有一个带有隐藏 md:block 类的 div，其中包含来自 Heroicon 的此元素： 。 目前，div 元素仅在...

如何使用 CSS 使背景图像响应式？

我正在为我的网页制作常见问题解答部分，但我无法使其后台响应。它在不同的屏幕尺寸上调整得不好。 html{ 高度：100vh； 宽度：100vw；...

基于 @media 查询更新根字体大小（因此 rem）的响应式 Tailwind css？

我一直在我的 Vue 项目中使用 Tailwind，总体来说它非常好，但是总是为我的所有内容编写 sm:w-10 lg:w-10 2xl:w-30 （等等）有点烦人类。 所以我在想，因为...

如何在没有 CSS 的情况下处理服务器组件中的响应能力？

这基本上是页面的根。它有3个组件，MainMap（客户端）和ListCasas（服务器）。 最后的按钮更改 url searchParams 并更新 UI。现在，这段代码...

如何根据长度减小字体大小？

目前我的页面上有一些大文本，布局对于短文本（长度约为 12-14 个字符）效果很好，但超过这个长度就会溢出或换行。这是不可取的，所以我希望尺寸...

水平列表的响应式分隔符

这个问题通过询问如何删除由视口大小引起的换行符处的分隔符来扩展“导航分隔符”。 宽视口 -> 项目 1 |第 2 项...

用于媒体查询的最常见手机和平板电脑尺寸？ （包括基于 10 万用户的答案）

我正在进行响应式设计，并希望确保 CSS 媒体查询针对最常见的设备尺寸进行了优化。 （当然，同时适用于所有尺寸。） 那么，最常见的 si...

Tailwind CSS 响应类/状态类不起作用

我正在使用变换翻译-y-值转换。我想要的是让这些类在小于“lg”的屏幕上使用“焦点”，在“lg”或更大的屏幕上使用“悬停”来激活。 这个想法是为了解决...

我们可以用曲线来创建整个页面的样式吗？

在将数据导出为PDF时，我们可以使用背景图像作为整个页面的设计，这需要边框和特定的页面设计，但这似乎不是一个好的做法，因为图像会变慢......

保持图像的纵横比，但在达到最大/最小高度时进行裁剪

我正在尝试使该图像具有响应能力，它将调整大小并在所有尺寸下保持纵横比。然而超过 650px，它的高度不会增加，只会裁剪顶部和底部以保持...