responsive-design 相关问题

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

如何使用sass根据body类设置不同的媒体查询断点

我正在构建一组将从多个不同站点提供服务的网页,每个模板都包含一些特定于站点的内容。 它们本质上是相同的,但差异足以满足我的需要......

回答 1 投票 0

可折叠设备UI,折叠和展开状态

有什么方法可以在折叠状态或展开状态下从可折叠设备获取用户屏幕状态,我尝试做了一些研究,我发现了这个, bool isFolded = 屏幕宽度 < 600 ||

回答 1 投票 0

带有 srcset 和延迟加载的全宽响应式背景图像

我正在开发一个网站,该网站的主页上有一系列“英雄”面板,其中的文本覆盖在大背景图像上。 理想情况下,我想使用带有 srcset 和 size 的内联图像......

回答 2 投票 0

如何高效实现较小宽度设备的网页响应能力?

我想知道如何才能为较小宽度的设备(手机)实现高效的响应能力,我如何才能确定我所应用的样式能够很好地寻找所有差异...

回答 1 投票 0

由 flex-grow 调整大小的弹性项目中包含的文本上的省略号

我有一行,使用Flexbox,其中包含单元格。 我希望第一个单元格的文本位于一行并用省略号截断。 一切都保持响应。 然而...

回答 1 投票 0

导航栏在手机视图中没有响应

我的导航栏没有响应。我希望它变成一个 3 栏菜单,当您通过手机查看网站时,您可以点击该菜单,但它似乎不起作用。这是一个...

回答 1 投票 0

为什么这个水平可滚动表格在移动视图中会在表格右侧显示额外的空间?

我似乎无法理解为什么在缩小视口时,这个响应式表格会在其右侧添加额外的空白。我尝试使用开发工具来弄清楚正在做什么......

回答 1 投票 0

顺风响应式设计

我是 Tailwind 的新手,我正在阅读响应式设计章节,我知道默认情况下,Tailwind 使用移动优先断点系统并为 min-modifi 定义一些类名,例如 sm 、 md 、 xl ...。 ..

回答 1 投票 0

可调整大小的窗口由于弹性增长而无法完全展开

我正在设计一个类似于CodePen侧边栏的布局。虽然我已经成功地复制了它的大部分行为,但向上滑动窗口时我遇到了一个问题 - 一切都很顺利。然而...

回答 1 投票 0

我无法将我的 div 居中并让他做出响应

我正在用 html 和 css 制作学校项目,按钮上方的所有上部部分都居中且响应式,但按钮未居中(我必须将宽度更改为 60%),而且它们不是居中

回答 1 投票 0

这个标题如何粘贴?

这是我的 ant-list-header elemet css 这是我的 ant-list-header elemet css <div class="ant-list-header" style=" position: sticky; top: 0; z-index: 100; height: 30px; "><div class="sc-eDZJSx kXYedM"><strong>Unmapped Rate Plans</strong><strong>See all</strong></div></div> 这是我的 ant-list-items 元素 <ul class="ant-list-items"></ul> 什么样的CSS会让我粘上ant-list-header 现在 尝试过的位置:粘性但没有工作 .ant-list-header { position: sticky; top: 0; z-index: 100; height: 30px; background-color: white; } <div class="ant-list-header"> <div><strong>Unmapped Rate Plans</strong><strong>See all</strong></div> </div> <ul class="ant-list-items"> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> </ul>

回答 1 投票 0

如何让 Reactstrap 响应式?

我刚开始使用reactstrap(不是react-bootstrap),并且正在尝试如何渲染“移动”和“桌面”视图。 我如何让reactstrap渲染页面...

回答 1 投票 0

当我缩小窗口大小时,为什么我的容器会缩小并留下空白

我是网络开发新手,我在网站中遇到了问题,当我减小窗口大小以使其响应时,我的容器缩小并留下空白。 我试过在 yt 中查找,

回答 0 投票 0

如何防止 100vh 元素导致 Instagram 浏览器出现问题?

我的主页上有一些全高(100vh)元素,它们在所有浏览器上都能正常工作,除了通过 Instagram 浏览器查看网站时除外。显示的动态导航选项卡...

回答 1 投票 0

当屏幕低于 x px 时,我的 css 命令将部分菜单更改为新行,这有什么问题吗?

我想在屏幕宽度较低时更改菜单以在自己的行中显示每个菜单链接,但当我使用它时,它在一行中仍然相同。 然后在另一个 .jinja 站点中使用 menu.jinja ,其中

回答 1 投票 0

响应式 CSS 圆圈

目标: 响应式 CSS 圈子: 具有相等半径的刻度。 半径可以按百分比计算。 半径可以通过媒体查询来控制。 如果解决方案是 javascript,我仍然需要模拟媒体

回答 5 投票 0

限制 FlatList 的大小,以免强制页脚离开屏幕

有没有办法限制 FlatList 的大小,使得无论列表中的项目数量有多少,具有绿色背景的底部 View 始终可见? 这是代码: 常量

回答 1 投票 0

是否有 JavaScript 事件来捕获 Flex 方向更改。 screen onchange 做不到

我想为用户提供水平或垂直滚动弹性项目的选项。 我遇到的问题是,如果它们从 Flex-Direction Column 更改为 Row 那么现在就会出现所有这些 avaia...

回答 1 投票 0

反应确认警报库

我正在使用React确认警报库进行删除确认,但如何使其响应所有屏幕视图,即小型设备? 对于笔记本电脑和平板电脑来说,它工作正常

回答 1 投票 0

带有javaScript的响应式页面

我有一个容器,当屏幕小于1000px时我想隐藏它。 CSS .desktop-links { 显示:无; } .active { 显示:块; } .in-active { 显示:无; } JavaScript: const DesktopLin...

回答 1 投票 0

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