responsive-design 相关问题

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

用 CSS 包围在顶部和底部边框之间的文本

我想复制照片中的效果,上面和下面有粉红色的霓虹灯边框,以及它们之间的文字。我怎样才能用 CSS 实现这一点?我试过了,但达不到同样的效果...

回答 1 投票 0

有没有更好的方法来实现时间线(见图),以便它能够响应不同的屏幕尺寸?

当前时间轴实现基于 3800px 左右宽度的屏幕尺寸。我使用 display: grid 和 display: flex 来实现时间线外观。我还使用 ::after 创建垂直线...

回答 1 投票 0

使用开发工具和响应选项,媒体采石场不会在小屏幕上发生变化

我已经这样做了 1000 次并且一直使用媒体采石场。在 6 个月没有编程之后,我开始了一个新项目,我正在开发一个新项目,该项目逐渐创建一个网页......

回答 1 投票 0

Material UI 中的响应式排版?

移动设计的设计通常具有较小的标题字体。 Material UI 是否有一种使版式响应的机制? 我看到默认主题的字体大小在 r...

回答 8 投票 0

有人可以帮我让这张卡片网格响应吗?

我最近开始在我的工作场所使用 HTML 和 CSS。 现在我遇到了第一个大问题:使我的网格卡元素具有响应能力。 我的列中有四个卡片元素,每个元素都带有文本...

回答 1 投票 0

我希望文本仅跨越第一个剪辑路径区域

我希望文本仅跨越第一个剪辑路径区域,而不跨越到右侧剪辑路径。我尝试了多次调整但没有效果。文本应该位于剪辑路径的顶部而不是底部...

回答 1 投票 0

响应式设计的问题:将图像放置在圆圈内时出现溢出问题

我目前正在研究响应式设计,在尝试将图像放置在圆圈内而不溢出时遇到问题。我有一个圆形容器,我希望图像适合......

回答 1 投票 0

方向改变时失去块状态

我正在尝试让我的 Flutter 移动应用程序具有响应性和自适应性。 我正在使用这个小部件来完成此任务: 类ExamplePage扩展StatelessWidget { const ExamplePage({super.key}); @overr...

回答 1 投票 0

无法在移动视图中显示内容

我已将灯箱添加到网页,但内容未显示在移动视图中。我是一名开发人员,也是设计新手。 http://www.kahui.org/user/boardmember

回答 1 投票 0

Google Web 字体无法在 iOS 版 Chrome 中加载

当我使用 Google Webfonts 时,它们在我关心的每个浏览器上都能正常加载,除了 Chrome/iOS。这看起来很奇怪,因为它在 Mac 版 Chrome 和 iOS 版 Safari 上运行良好,所以我不认为这是 iOS 问题...

回答 8 投票 0

引导响应式侧边栏菜单到顶部导航栏

所以我一直在寻找这方面的指导,但没有结果。 基本上,我只想有一个侧边栏,但是当屏幕变小时,即智能手机屏幕尺寸,它会变成

回答 3 投票 0

如何让我的设计响应所有屏幕?

我需要一些帮助来使我的设计能够响应小屏幕,这对大屏幕有一点好处,但不适合小屏幕,请帮助使其响应。 我的欢迎信息隐藏在小屏幕上......

回答 1 投票 0

如何使用 Next.Js 实现响应式移动导航菜单?

所以,我对如何在 Next.js 中实现响应式移动导航有点困惑。我的问题源于通过 Javascript 和 CSS 处理菜单切换状态。 我的导航菜单如下...

回答 2 投票 0

屏幕尺寸改变时如何改变div尺寸?

当我更改屏幕大小时,我想根据更改div大小(注意:不使用按钮或组件) 当我更改屏幕尺寸时,我想根据更改div尺寸(注意:不使用按钮或组件) <div id="main-page"> <div class="container-fluid p-0"> <div class="row"> <div class="col-lg-12"> <div id="height" style="color: wheat;"></div> </div> </div> </div> </div> var width = $(this).width(); var height = $(this).height(); $(document).ready(function() { $("#main-page").width(width).height(height); }) ; 您需要在 resize 事件上设置所需元素的宽度和高度。请参阅以下示例。 var width = $(this).width(); var height = $(this).height(); $(document).ready(function() { $("#main-page").width(width).height(height); }); $(window).on("resize", function() { width = $(this).width(); height = $(this).height(); $("#main-page").width(width).height(height); $("#height").text(`Height: ${$("#main-page").height()} Width: ${$("#main-page").width()}`); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div id="main-page"> <div class="container-fluid p-0"> <div class="row"> <div class="col-lg-12"> <div id="height" style="color: wheat;"> </div> </div> </div> </div> </div>

回答 1 投票 0

文本过渡卡顿根据页面大小向下

所以我正在尝试制作一个用于练习和一些小型学校项目的网站。我正在尝试使用一个盒子,里面有标题,图片设置为背景,当悬停时,它会......

回答 1 投票 0

如何将我的导航栏从一行升级为两行?

最近我正在开发一个网站,其导航栏如下所示 但因为我想将我的导航栏更改为此 我自己尝试过使用填充和边距,但不知何故它不起作用并且不在...

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

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