responsive-design 相关问题

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

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

我一直在尝试使用 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

在React中使侧边栏和导航栏在移动屏幕中响应

所以基本上侧边栏和导航栏在我的代码中都是不同的组件我有 navbar.jsx 和 sidebar.jsx 并且两者都在 Student.jsx 下调用...现在在移动屏幕上我想要侧边栏

回答 1 投票 0

您可以创建一个保留纵横比的 SVG 蒙版,并在缩放时粘在左右边缘吗?

我正在尝试创建一个 SVG,其中我需要遮罩来保留其各自的纵横比,同时坚持 SVG 容器的左右边缘。口罩不应变形或丢失...

回答 1 投票 0

如何完全禁用div元素的垂直收缩

我的网站上有一个 div,我想保持视口高度,直到 div 变得足够小到子元素开始碰撞的位置(或稍早)。我试过最小高度...

回答 4 投票 0

为什么我的 max-width 属性被忽略?

我目前正在开发一个网站,现在我专注于响应能力。突然之间,不久前,我在移动设备上的网站会自动加载放大到左上角......

回答 1 投票 0

调整 svg 的大小会导致额外的高度

我有一个交互式 svg 并尝试使其响应 viewbox 和 display: flex: // HTML 我有一个交互式 svg 并尝试使其响应 viewbox 和 display: flex: // HTML <div className="interactive-svg"> <svg ref={svgRef} viewBox={`0 0 ${svgWidth} ${svgHeight}`} /> </div> // CSS-Styles .interactive-svg { display: flex; justify-content: center; align-items: center; svg { user-select: none; cursor: cell; } } 但是如果我缩小窗口大小,svg 似乎会获得不应该存在的高度: 如果我检查该元素,我会发现它会自动设置高度和宽度。如果我在检查器中将其删除,则会出现所需的效果: 如何在 HTML/CSS 中指定以获得所需的效果,这意味着“矩形”-svg 保留 是因为弯曲吗? Flexbox 是您需要为子 svg 显式(重新)设置宽度和高度的原因: .interactive-svg svg { width: 100%; height: auto; max-width: 100%; max-height: 100%; user-select: none; cursor: cell; }

回答 1 投票 0

Bootstrap响应式布局,彻底改变中大屏设计中的小屏设计

所以首先我使用 html css 和 js 构建一个页脚。然后我发现了 Bootstrap 并尝试使用 Bootstrap、移动优先设计来创建它 <576px. I've done the footer in the medium and la...

回答 1 投票 0

Contenteditable Div 展开而不是添加滚动条

我有一个带有 ID 编辑器的 contenteditable div。我遇到一个问题,当我添加内容时,编辑器的高度不断扩大。我将overflow-y设置为auto,但没有添加scrollba...

回答 1 投票 0

有没有办法让iframe在typo3中的html内容元素的高度上响应?

我正在使用 Typo3 中的内容元素 HTML 来包含 iframe,以显示从数据库查询(php 文件)生成的内容。此内容用于之前创建的网站...

回答 1 投票 0

图片在平板电脑上快速改变大小

我在桌面上建立了一个应该具有响应能力的网站。当我想在平板电脑上测试它时,图片开始不停地改变尺寸,从大变小,从小变大。一台桌面

回答 1 投票 0

无法实现类似于使用Flutter提供的示例的侧边栏菜单设计?

问题: 我正在 Flutter 中进行侧边栏菜单设计,并尝试复制下面的设计示例中显示的外观和感觉。然而,我不太能达到想要的结果...

回答 1 投票 0

如何认为我们的网站/组件是响应式的

所以我目前正在尝试制作响应式页脚,并且我想知道如何认为网站/组件是响应式的,虽然我确实知道需要使用相对值并且@media q...

回答 1 投票 0

Flexbox:如何使用正确的宽度和高度在列中排列响应式菜单项?

我正在尝试使网站响应式,我想要包含的第一件事是导航菜单,但是,由于我是媒体查询方面的新手,所以我遇到了一些困难。 第一个问题是我...

回答 1 投票 0

Vue.js 插槽未在响应式布局中传递内容

我正在开发一个具有响应式布局的 Vue.js 项目,并且遇到了 AwPage 组件中的插槽无法呈现内容的问题。这是我的设置: index.vue:使用不同的组件...

回答 1 投票 0

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