responsive-design 相关问题

响应式网页设计(RWD)是一种Web设计和开发方法,旨在制作网站,以便根据屏幕大小,平台和方向在各种设备上提供最佳体验。

由于在移动网络上打开键盘进行文本输入而忽略或禁用移动视口调整大小?

我正在使用这种仅 CSS 策略来处理响应式背景图像和响应式背景图像以及包含的内容...我用于背景和内容的设置类型的示例: &l...

回答 4 投票 0

CSS响应式设计水平滚动且内容有空白

当我使用 HTML 和 CSS 进行网站设计时,它适用于大屏幕,但是当涉及到媒体查询以使其响应小屏幕和中型屏幕时,它显示了很多空白...

回答 2 投票 0

在flutter中无法实现想要的设计

这里有一个更专业的方式来表达你的问题: 问题: 我正在开发一个 Flutter 项目,旨在复制下图所示的设计: 我怎样才能实现类似的la...

回答 1 投票 0

我怎样才能制作一张像这样的 HTML/CSS 响应式卡片

我想制作一张完全响应式的卡片(图 1),并且可以支持位于其左侧的两张卡片,在我正在构建的网站上总共三张卡片(图 2)。我已经编码了

回答 1 投票 0

英雄部分的响应式图像在设定宽度之前缩小的问题

我想要什么 我所看到的 我正在制作一个响应式英雄部分,我希望图像保持完整尺寸,直到窗口宽度降至 1300 像素以下。然而,我注意到图像

回答 1 投票 0

CSS 中 calc 函数执行的频率是多少?

只是好奇 css calc 函数执行的频率。是在页面加载时执行一次还是每次调整页面大小时都重新计算?用谷歌搜索了一下,但我找不到......

回答 1 投票 0

响应式方块网格

我想知道如何使用响应式方块创建布局。每个方块都有垂直和水平对齐的内容。具体示例如下...

回答 6 投票 0

自动调整容器的字体大小,使文本只有一行但占据整个容器宽度(仅限 CSS)

假设我有一个文本容器,是否可以自动调整字体,使里面的文本恰好适合一行并占据整个容器宽度而不溢出?仅使用 CSS。 就像假设的一样...

回答 1 投票 0

Bootstrap 5 - mt-5 在 ≥768px 屏幕尺寸上覆盖 mt-md-0

在中等和中等以下的屏幕尺寸上,我有 4 个列,它们将相互重叠,我需要在中等和中等以下的屏幕尺寸上给 2 列一些边距,并在中等屏幕以上的屏幕上将其删除...

回答 1 投票 0

如何在React Native中制作像弧形底部标签栏这样复杂的设计?

我是应用程序开发新手。我想在应用程序中制作一个如下所示的标签栏,但我不能。我尝试通过样式来做到这一点,但它没有响应。我怎样才能做到这一点?

回答 4 投票 0

如何将导航内容居中并确保背景在大屏幕上拉伸全宽?

我正在尝试针对大屏幕优化网站的导航栏,但我面临两个问题: 当屏幕宽度超过800px时,导航栏内的内容不居中。

回答 1 投票 0

响应式网站设计的尺寸

我想设计一个网站。但是请告诉我可以用于响应式网站设计的尺寸是多少。 该尺寸必须包含移动设备、平板电脑、个人电脑和其他设备的尺寸。 我想在媒体中使用它们

回答 2 投票 0

如何更改 div 的形状,同时保持其与普通 div 的功能?

我看到了下面的设计,并想在我的网络应用程序中实现类似的东西,但是如何使 div 倾斜在顶部(如图所示)? 我的输出: 我看到了下面的设计,并想在我的网络应用程序中实现类似的东西,但是如何使 div 倾斜在顶部(如图所示)? 我的输出: <div class="" style="height: 100vh; background-color: white"></div> <div class="" style="height: 100vh;position: relative; border: 2px solid black;"> <div class="" style="height: calc(50% + 2rem);background-color: white;"></div> <div class="" style="height: calc(50% - 2rem);background-color: blue;"></div> <h1 style="position: absolute; top: 50%; z-index: 9; transform: translateY(-50%); transform: rotate(-2deg); text-align: center;width: 100%; background-color: yellow; height: 4rem">WELCOME TO OUR WEBSITE</h1> </div> <div class="" style="height: 100vh; background-color: blue"></div> 我也尝试过顺风倾斜和变换旋转,但不幸的是我得到了水平滚动条并且转动div后有空白 预期: 与我发布的第一张图片类似,我想使用顺风制作一个适当的响应式倾斜 div。它应该是全宽,顶部倾斜,具有双色调颜色和直底部。 您需要组合变换:translateY(-50%)和rotate(-2deg)。下面的代码可以帮助你 <div class="" style="height: 100vh; background-color: white"></div> <div class="" style="height: 100vh;position: relative; border: 2px solid black;"> <div class="" style="height: calc(50% + 2rem);background-color: white;"></div> <div class="" style="height: calc(50% - 2rem);background-color: blue;"></div> <h1 style="position: absolute; top: 50%; z-index: 9; transform: translateY(-50%) rotate(-2deg); text-align: center; width: 100%; background-color: yellow; height: 4rem; padding-top: 20px;">WELCOME TO OUR WEBSITE</h1> </div> <div class="" style="height: 100vh; background-color: blue"></div>

回答 1 投票 0

为什么在较小的屏幕上我的图像不会移动到文本下方?

我一直在尝试使用 tailwind css 及其响应式布局和设计使我的代码适合移动设备。但是,当将其集成到我的代码中时,图像“bot.png”不会移动到文本下方

回答 1 投票 0

如何在 Tailwind CSS 中自定义默认间距比例?

我目前正在使用 Tailwind CSS 进行一个项目,我发现默认的间距比例(如 p-1、p-2 等)不太符合我项目的设计要求。我想要定制...

回答 1 投票 0

将图像放置在具有响应宽度和高度的另一图像的中央

如何将一个图像放置在另一个图像的中央?我尝试了一些类似问题的答案,但没有一个对我有用。 基本上我需要 2 个图像变成 1 个图像 一定是有反应...

回答 2 投票 0

购物车物品容器无法在移动设备上正确滚动

我正在开发一个网页布局,我需要 .cart-items-container 来占据 .cart-rest-details 部分上方的剩余空间。如果 .cart-items-container 的内容应该是可滚动的

回答 2 投票 0

Flexbox 布局问题:购物车项目容器无法在移动设备上正确滚动

我正在开发一个网页布局,我需要 .cart-items-container 来占据 .cart-rest-details 部分上方的剩余空间。如果 .cart-items-container 的内容应该是可滚动的

回答 1 投票 0

在 Flutter MediaQuery.of(context).size.width 中使用 device_preview 插件不会给出模拟手机的 witdh

为了在 Flutter 中练习响应式设计,我决定使用 device_preview。我尝试了不同的手机。但每次我都得到原始设备的宽度。 例如原设备的witdh为

回答 3 投票 0

在CSS中,有没有一种方法可以在桌面上将margin-inline设置为auto,但在移动设备上将margin-inline设置为1rem,而不使用媒体查询?

我正在制作响应式布局。我首先将其开发为移动设备,主容器有一个 margin-inline: 1rem;。当视口增长到桌面大小时,我想限制容器的宽度...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.