responsive-design 相关问题

我想在移动设备中隐藏一个 div，但我做不到，这是我下面的代码我想在移动设备中隐藏一个 div，但我做不到，这是我下面的代码 <div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right sm:hidden"> <p>asdasd</p> </div> 如何在顺风中做到这一点 Tailwind是mobile优先，sm是576px以上(640px in v1)，如果想让它隐藏在md下面，应该就是<div class="hidden md:block"> 你能试试吗： <div class="hidden sm:block"> <p>asdasd</p> </div> 或者sm:flex如果你想要它是灵活的。这是隐藏在手机上的示例： <a href="#" className="hidden md:block bg-transparent py-2 px-4 border border-black rounded-md text-base font-medium text-black hover:bg-gray-100" > text </a>

javascript css responsive-design tailwind-css

回答 3 投票 0

电子邮件设计：@media 查询中的字体大小不一致

我遇到一个问题，我在媒体查询中应用到我的电子邮件的字体大小不一致。在某些情况下，它工作正常，但在其他情况下，它会被忽略。还有人吗

responsive-design html-email litmus

回答 1 投票 0

在小屏幕上垂直布局一些网格列

我有一个看起来像这样的表格：我已经使用 CSS 网格对其进行了布局：我有一个看起来像这样的表格：我已经使用 CSS 网格对其进行了布局： <div style="display: inline-grid; grid-template-columns: auto auto auto auto"> <div><input></div> <div><input></div> <div><input></div> <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div> <div><input></div> <div><input></div> <div><input></div> <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div> <div><input></div> <div><input></div> <div><input></div> <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div> </div> 在小屏幕上，我希望布局更改为：但我不知道如何更改 CSS 网格以获得此布局，如果可能的话。简单地让那些有<div>的<input>跨越3列，那些没有跨越3行并确保网格尽可能密集： #container { grid-auto-flow: dense; } @media (max-width: 768px) { #container > :not(:nth-child(4n)) { grid-column: 1 / -2; } #container > :nth-child(4n) { grid-column-start: 4; grid-row-end: span 3; } } 试试看： #container { display: inline-grid; grid-template-columns: repeat(4, auto); grid-auto-flow: dense; } #container > :nth-child(4n) { font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px; } @media (max-width: 768px) { #container > :not(:nth-child(4n)) { grid-column: 1 / -2; } #container > :nth-child(4n) { grid-column-start: 4; grid-row-end: span 3; } } <div id="container"> <div><input></div> <div><input></div> <div><input></div> <div>⊖</div> <div><input></div> <div><input></div> <div><input></div> <div>⊖</div> <div><input></div> <div><input></div> <div><input></div> <div>⊖</div> </div>

css responsive-design css-grid

回答 1 投票 0

C# - 针对不同分辨率的 WPF 响应式设计

我正在 WPF 中设计桌面应用程序。我的问题是分辨率，可以支持该应用程序的最小分辨率是 1024x768（对于 crt 显示器）并且在此分辨率下最大化该应用程序似乎没问题......

c# wpf user-interface responsive-design screen-resolution

回答 2 投票 0

在 w3 响应式网站上限制页面最大宽度

编辑：添加代码）我正在使用 w3 代码构建我的响应式网站，使用 w3 代码片段并将它们连接在一起。（Etsy 店主自己开店。）我喜欢这个网站如何自动

html responsive-design w3.css

回答 1 投票 0

如何禁用位置固定的 div 的垂直滚动

我有以下 HTML && CSS 布局： .循环进度{ 边界半径：50%；显示：弹性；证明内容：居中；对齐项目：居中；宽度：96px；高度：96px； } ...

html css responsive-design

回答 1 投票 0

我的网站没有响应，也没有调整大小。

我真的需要一些帮助，我已经创建了我的网站 http://hayleyryan.com/ 而且我无法将其调整为更小的浏览器窗口或更小的设备。我已经包括我真的需要一些帮助，我已经创建了我的网站http://hayleyryan.com/ 而且我无法将其调整为更小的浏览器窗口或更小的设备。我在文档顶部包含了<meta name="viewport" content="width=device-width, initial-scale=1">，我还将所有内容都设置为百分比宽度。我已经查看了我所有的 CSS，寻找任何可能是原因的东西——我找不到任何东西。在我删除元标记并稍后将其放回之前，它工作正常。任何帮助将不胜感激，谢谢。不幸的是，仅通过添加<meta name="viewport" content="width=device-width, initial-scale=1">您无法制作响应式网页。它需要很多其他的东西。看看另一个关于 stackoverflow 的问题，这可能有帮助：How to implement responsive web design and its best practices Bootstrap 包括响应式、移动优先的流体网格系统，可随着设备或视口尺寸的增加适当扩展至 12 列了解这个。响应式网页设计 - 媒体查询 <meta name="viewport" content="width=device-width, initial-scale=1.0"> /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } Raam Singh 是对的，但是对于您的具体情况，我想补充一点，您的“窗帘” ul 是绝对定位的。您应该使其不是绝对的或添加“宽度：100％；”。你的“桌面”图像也应该有“宽度：100%；”如果你想让它可以调整大小。请在开始响应之前检查网站 http://getbootstrap.com/css/#grid-options 我尝试了所有的答案，但我的网站仍然没有响应我会上传我的html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MNT CAB V2</title> <link rel="shortcut icon" href="Final sticker MNT.png" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <div class="logo"> <img src="Final sticker MNT.png" alt="logo"> </div> </head> <body> <nav> <a href="index.html">Home</a> <a href="#ABOUT">About</a>g <a href="#SERVICES">Services</a> <a href="#GALLARY">Gallary</a> <a href="#CONTACT">Contact Us</a> <div class="animation start-home"></div> </nav> 这是我的 html，它没有响应 D: 我不知道为什么我的页面也没有响应。任何帮助将不胜感激。

html css responsive-design resize responsiveness

回答 6 投票 0

响应式菜单隐藏在 Bootstrap 幻灯片后面

我一直在研究定制的 Bootstrap 设计。我构建了一个响应式菜单，它使用 JS 来打开和关闭汉堡包菜单。我目前在我的 index.html 和我的 about.html 上有它。它...

css responsive-design bootstrap-5

回答 1 投票 0

我正在尝试在 viewpager 滑动时暂停视频

我已经搜索过了，这是我得到的可能答案，但我不知道该怎么做，我不只是理解 @覆盖 public void onPageSelected(int position) { // 找到你的 pla...

android responsive-design android-viewpager

回答 0 投票 0

responsive-design 相关问题

最新问题