responsive-design 相关问题

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

如何使用引导程序构建完全响应的封面图像(宽度和高度)?

我正在尝试构建一个完全像这样的引导程序页面 --> https://voggt.crew.work/jobs 。 我无法制作响应式封面图片和个人资料图片。有没有可能用靴子来建造这个……

回答 0 投票 0

在移动视图中,我的页脚没有停留在页面底部,而是出现在页面下方

在移动视图中,我的页脚没有停留在页面底部,而是出现在页面下方。我试过使用 'position: fixed' 'bottom: 0' 和 'position: absolute' 'bottom: 0' 和 'positi...

回答 1 投票 0

根据列将 HTML 表格拆分为多个表格

我需要创建一个响应式 HTML/CSS 表格。在移动屏幕上,此表应根据其列分成 2 个表。这是我的原始表格: ...

回答 1 投票 0

Flexbox 列的宽度不会随着窗口大小的调整而缩小

我正在使用 Flexbox 在浏览器窗口缩小时使 5 个框响应。其中 4 个框在 2 列中并且无法收缩(flex-direction:column)。不在列中的单个框...

回答 4 投票 0

如何将多个图像放在文本之间的不同位置?

我是 CSS 的新手,我打算制作一个页面部分,其中文本之间有四个图像(两个左,两个右),每个图像位于不同的位置。我需要让它响应...

回答 0 投票 0

如何让我的文本与容器的高度相同?

这是我的 HTML: 你好 这是我的 CSS: .bigcontain...

回答 2 投票 0

如何使用 CSS Grid 和 Flexbox 创建流畅且高性能的布局? [关闭]

我目前正在从事一个 Web 项目,该项目需要包含多个部分和元素的复杂布局。我想使用 CSS Grid 和 Flexbox 来实现这一点,但我不确定如何创建一个流畅的...

回答 1 投票 0

如何使 2 个徽标图像完全响应?请给我一些网络开发指南,我是新手

嗨,请帮助我是开发网站的新手,不知道如何解决问题 我似乎无法让 2 个徽标图像完全响应并阻止它们彼此落后和其他 c ...

回答 0 投票 0

没有样式表的多个 div 中的响应式网格

我正在尝试在计算机上制作大致如下所示的布局: 宽布局 这在手机上: 高布局 我不能使用单独的样式表或 < style > 标签,只能使用样式

回答 2 投票 0

没有 CSS 的多个 div 中的响应式网格

我正在尝试在计算机上制作大致如下所示的布局: 宽布局 这在手机上: 高布局 除了样式属性,我不能使用 CSS,因为它是为一个网站做的……

回答 0 投票 0

如何在我的项目中有效地应用响应式设计?

我目前正在从事前端 Web 开发项目,并且正在努力实现响应式设计。我尝试了几种不同的方法,但它们似乎都有各自的缺点......

回答 1 投票 0

图像大小不会遵循 Safari 中的 CSS 规则

我写了一个简单的静态页面,其中包含 元素中的图像。它最初是在 Bootstrap Studio 中设计的,但我为某些图像添加了一点样式和资产交换... 我写了一个简单的静态页面,其中包含 <nav> 元素中的图像。它最初是在 Bootstrap Studio 中设计的,但我为某些图像添加了一些样式和资产交换。是这样写的 <nav class="navbar navbar-light navbar-expand-md fixed-top navbar-shrink py-3" id="mainNav"> <div class="container"> <a class="navbar-brand d-flex align-items-center" href="/"> <!-- This is the problematic image --> <img id="mainLogo" src="assets/img/logo.png"> </a> <button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="navbar-nav mx-auto"> <li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li> <li class="nav-item"></li> <li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li> <li class="nav-item"><a class="nav-link" href="contacts.html">Contact us</a></li> <li class="nav-item"><a class="nav-link" href="features.html">Features</a></li> </ul><a class="btn btn-primary shadow" role="button" href="/login">Log in</a> </div> </div> </nav> 这是样式表 #mainLogo { height: 40px; } @media screen and (min-width: 768px) { #mainLogo { height: 50px; } } 在大多数其他浏览器(移动或桌面、模拟或真实)中,图像按预期工作。然而,在 iOS Safari 中,图像将忽略 CSS 并变为100vw。 这是一位用户报告的,我没有任何 Apple 设备。有什么解决方法吗?

回答 0 投票 0

将图像与标题句的最后一行对齐

我有一个标题元素,我已将其设置为最大宽度,这导致它跨越多行。我想在最后一句话旁边放一张图片。 你可以看到我取得的成就......

回答 1 投票 0

如何让div满屏

我想制作占屏幕宽度和高度 100% 的 div,它也可以响应 - 它给出这样的输出 - * { 顶部:0%; 位置:相对; 字体系列:'Imprima',sans ...

回答 1 投票 0

将 HTML、CSS 和 JavaScript 网站转换为 React JS

我有一个使用 HTML、CSS 和 JavaScript 构建的网站主页。它还使用了一些外部库,例如 bootstrap 等。有人可以指导我如何将其转换为 React 项目。我...

回答 0 投票 0

我怎样才能使每张图片下方的标签每行最多 3 个? (html + css,无 js)

我是 HTML + CSS 世界的新手(仍然没有 JS),作为家庭作业,我必须这样做(响应手机、平板电脑和台式机/笔记本电脑) 图片,作业示例: 我正在做这一切......

回答 2 投票 0

仅使用 CSS 最大化响应式 flexbox HTML 网页内的弹出窗口/工具提示宽度

我的情况和目标 我的网页布局类似于代码片段。导航内容是动态的,所以我不知道它的宽度,与tooltipcontainer之后的内容相同。因此我...

回答 1 投票 0

chrome 检查的电话视图弄乱了我网站某些页面上的尺寸

所以我一直在研究我正在制作的网站的响应能力,当我在主页上时一切正常。但是当我切换到任何其他页面时,由于某种原因尺寸不

回答 1 投票 0

如何切换我的导航栏以在移动视图中滑动?

我希望通过在移动视图中单击其图标来滑过我的导航栏,但我遇到了一些问题。它不是通过单击滑动。我确定我已经遵循了正确的 js 语法......

回答 1 投票 0

如何调整桌面的 CSS,但在平板电脑的另一个项目下面

所以我创建了一个网格布局,我希望按钮在桌面上时在同一行对齐,但是堆叠搜索栏在一行上的位置和它下面的其余行有一些空间......

回答 1 投票 0

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