responsive-design 相关问题

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

为什么点击 UL 时手机菜单会折叠?

我有一个使用 CSS 和 HTML 创建的移动导航菜单,它使用复选框技巧来打开和关闭菜单。我遇到的问题是,当您打开菜单并单击 .

回答 1 投票 0

为什么我的 html 表格 td 卡宽度低于 400px? (适用于移动设备)

我的td表里有几张卡。它的宽度突破了400px以下。我找不到解决方案。在其他大型设备上一切都很好。然而,低于 400 像素,卡片就会超出其宽度。这里...

回答 1 投票 0

有没有办法让我的文本使用 Flexbox 垂直响应?

当我使用谷歌内置工具检查它时,为什么我的文本不适合我的div(垂直)。当我尝试使其响应(缩小 div)时,文本溢出到下一个 div 中。我尝试使用...

回答 1 投票 0

旋转横向时移动响应不起作用

因此,我们的网站正处于上线前的最后阶段,但是我们刚刚注意到,当我们检查移动响应时,一切都工作正常,直到我们将移动设备旋转为横向

回答 3 投票 0

在 Flutter 中创建响应式 Tic Tac Toe 字段布局

我目前正在致力于在 Flutter 中实现响应式 Tic Tac Toe 字段,并且遇到了布局问题。我已经成功地显示了“十字”和“圆圈”符号,b...

回答 1 投票 0

为什么当使用align-items时,它会改变其中一个弹性项目的大小?

我使用弹性盒进行响应式设计。我没有改变每个弹性项目的大小。但是,当我应用align-items:center时,它会在显示时更改第一个弹性项目(图片2)的大小...

回答 1 投票 0

将内容区域垂直居中直至达到一定高度?

如何允许动态(高度变化)内容区域在用户屏幕上垂直居中(无论屏幕大小),直到它达到只剩下 100px 的自由空间

回答 9 投票 0

对角图像滑块在移动设备上不起作用

我有一个对角图像滑块,包括2张图像和1个滑块。滑块在网络上是可点击的(即,我可以滑动它),但我无法与移动设备上的滑块进行交互。 在移动设备中

回答 1 投票 0

当我将页面设置为 75% 宽度时,如何使此导航栏具有足够的响应能力,元素不会发生变化?

当我将页面大小调整到大约 75% 宽度时,导航栏中的元素会变得混乱。例如,右侧的按钮会改变大小,导航链接会偏离中心。 @导入...

回答 1 投票 0

如何设置随着用户输入长度的增长而动态增长的 TextInput 字段的初始高度(React Native)

我在解决 React Native 中的 TextInput 字段问题时遇到问题。在我的表单的这一部分中,用户可能会输入很长的内容。因此,我希望 TextInput 框变大

回答 1 投票 0

如何设置 TextInput 的初始高度,该高度应随着用户输入长度的动态增长而增长(React Native)

我在解决 React Native 中的 TextInput 字段问题时遇到问题。在我的表单的这一部分中,用户可能会输入很长的内容。因此,我希望 TextInput 框变大

回答 1 投票 0

通过 Bootstrap 自定义更改按钮上的悬停颜色

我正在尝试以悬停使按钮颜色变浅而不是颜色变深的方式设计按钮的样式。我尝试了引导程序自定义页面(http://getbootstrap.com/customize/),它...

回答 5 投票 0

响应式 jQuery UI 对话框(以及 maxWidth 错误的修复)

许多网站都使用 jQuery UI,但有一些重大缺点需要克服,因为 jQuery UI 不支持响应式设计,而且 maxWidth 时存在一个长期存在的错误...

回答 15 投票 0

Android Xml 布局问题导致 textView 下移

我不知道为什么布局设计在模拟器上看起来是正确的。 请检查屏幕截图和代码。几乎就像有东西在其他东西之上一样,导致工具栏和

回答 1 投票 0

我该如何制作一个侧边栏按钮来打开和关闭?

这里我正在设计一个网站克隆,我已经完成了大部分部分,我想让这个网站响应不同的设备,所有这部分都刚刚完成,但我想要一个用于操作的单个侧边栏按钮.. .

回答 1 投票 0

Div 在移动网站上不再左对齐

我正在从其桌面版本创建一个心理健康网站,我想将 div 与移动视图的左侧对齐。在 div 内,有一个输入文本字段和两个按钮作为一部分......

回答 1 投票 0

媒体查询对奇怪的值生效

这是我的媒体查询,因为我试图使我的反应应用程序响应。 @媒体屏幕和(最大高度:800px){ 字体大小:65px; .shuttleObject{ 宽度:90%; } } } 问题是,当我...

回答 1 投票 0

防止图像在移动设备上加载

为了最大限度地提高移动设备的效率,我宁愿没有用于桌面版本的图像。通过研究,我了解到只需使用 display:none; 即可。 css 或 jQuery('img'...

回答 4 投票 0

如何使英雄图像内的文本响应?

我正在尝试使用 Bootstrap 构建一个响应式网站,这对我来说是全新的。我想制作一个英雄图像,其中的文本位于中间。当我的背景图像调整大小时,我的

回答 1 投票 0

如何使用全屏高度的Flexbox以20:50:30的比例垂直划分三个<div>?

我想使用 Flex 制作移动优先响应式布局,其中三个部分以 20:50:30 的比例垂直划分,并具有屏幕的全高。 这是 HTML 部分: ... 我想使用 Flex 制作一个移动优先响应式布局,其中三个部分以 20:50:30 的比例垂直划分,并具有屏幕的全高。 这是 HTML 部分: <body> <main> <div class="parent"> <div class="topSection"> This is Top Section </div> <div class="middleSection"> This is Middle Section </div> <div class="bottomSection"> This is Bottom Section </div> </div> </main> </body> 预期布局: html,body { margin: 0; } main { height: 100vh; } .parent { height: 100%; display: flex; flex-direction: column; } .topSection { flex: 0 0 20%; } .middleSection { flex: 1 1 50%; background-color: yellow; } .bottomSection { flex: 0 0 30%; } 我是新来的,希望这个答案可以帮助你:D display: flex|设置布局为flex flex-direction: column|设置flex方向为column height: 100vh|设置外层div的高度为页面高度的100% flex: <value>|设置div比例 <div style="display: flex; flex-direction: column; height: 100vh"> <div style="flex:20%"> This is Top Section </div> <div style="flex:50%"> This is Middle Section </div> <div style="flex:30%"> This is Bottom Section </div> </div>

回答 2 投票 0

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