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

如何为 React Native 应用程序创建响应式 UI 设计

如何考虑设备尺寸、屏幕方向和像素密度等因素，为 React Native 应用程序创建响应式 UI 设计？

react-native responsive-design styled-components android-styles dimensions

回答 0 投票 0

如何在不调整父元素大小的情况下将图像放入 div 中，同时又能响应？

这是我的 HTML： ... 这是我的 HTML： <div class="data"> <div class="dataispod"> <div class = "detaljilevo"> <div class="detaljilevosub"> <h1 class="naslovdetalji"><?=$podaci->naziv?></h1> <h4 class="kategorijadetalji"><span><?=$podaci->nazivKategorije?> zadatak • Neizvršen</span></h4> <h4 class="opisdetalji"><?=$podaci->opis?></h4> <h5 class="datum">Datum kreiranja: <?=$noviDatumKreiranja?></h5> </div> <div id="buttonwrapperdetalji"> <button type="submit" class="dugmedetalji" name="button" onclick="izvrsiZadatak();"><span class="puntekst">Izvrši zadatak</span><span class="krataktekst">Izvrši</span></button> <form action="izmeni.php"> <button type="submit" class="dugmedetalji" name="button2" onclick="izmeni();"><span class="puntekst">Izmeni zadatak</span><span class="krataktekst">Izmeni</span></button> </form> </div> </div> <div class="slikacontainer"> <div class="slikawrap"> <img src="../slike/<?=$podaci->slika?>"/> </div> </div> </div> </div> 这是我的 CSS： .data { margin: 80px 60px 0px 80px; position: relative; background-color: #BEBDC3; border-radius: 5px; display: flex; flex-direction: row; justify-content: space-between; height: 400px; width: 70%; } .dataispod { background-color: #ffffff; border-radius: 5px; display: flex; justify-content: center; align-items: center; height: 400px; width: 100%; } .detaljilevo { display: flex; flex-direction: column; justify-content: space-between; background-color: green; height: 400px; width: 50%; } .detaljilevosub { display: flex; width: 100%; flex-direction: column; } .slikacontainer { display: flex; justify-content: center; align-items: center; overflow: hidden; width: 50%; background-color: rebeccapurple; } .slikawrap { height: 60%; width: 60%; display: flex; justify-content:center; align-items:center; overflow: hidden; border-radius: 5px; box-shadow: 5px 5px 20px #555555; } .slikawrap img { border-radius: 5px; overflow:hidden; } 用户应该上传图片，我应该在元素中显示它。允许用户上传任何尺寸的图片，所以我想找出一种显示它们的方法。几个小时以来，我一直在努力解决这个问题，但似乎没有任何效果。我将宽度作为百分比放在 slikawrap 类上，因此它会响应，但这会导致父 div data 和 dataispod 在我希望它保持不变时调整大小。您可以尝试使用 background-image CSS 属性或 object-fit CSS 属性和 contain 的值，以确保它始终适合您的容器。下面的例子： .bg { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAKCAYAAAAnx3TwAAAAT0lEQVR42u3XMQEAAAgDINc/9IyhB7Qg03YAAACAUxF0AAAAEHQAAABA0AEAAEDQAQAAAEEHAAAAQQcAAAAEHQAAAAQdAAAAEHQAAAD4ZwHnKh3tbtO8XgAAAABJRU5ErkJggg==); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #eee; /* This is just to illustrate the container size */ width: 100px; height: 100px; } .img { object-fit: contain; background-color: #eee; /* This is just to illustrate the container size */ width: 100px; height: 100px; } <div class="bg"></div> <hr /> <img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAKCAYAAAAnx3TwAAAAT0lEQVR42u3XMQEAAAgDINc/9IyhB7Qg03YAAACAUxF0AAAAEHQAAABA0AEAAEDQAQAAAEEHAAAAQQcAAAAEHQAAAAQdAAAAEHQAAAD4ZwHnKh3tbtO8XgAAAABJRU5ErkJggg=="> <hr /> <div class="bg" style="background-image: url(https://placekitten.com/1000/400); border-radius: 50px"></div> <hr /> <img class="img" style="border-radius: 50px" src="https://placekitten.com/1000/400"> （数据 URI 中使用的图像大小为 1000px x 10px）

html css image responsive-design

回答 1 投票 0

响应式菜单的问题

我的网站在大屏幕上有一个水平导航菜单。我试图让它在移动屏幕上响应。当我在笔记本电脑上缩小屏幕尺寸以及在 Chrome 上查看网站时

responsive-design

回答 0 投票 0

响应式 SVG viewBox preserveAspectRatio:"none" 和 viewBox 缩放为百分比

我正在尝试使用 preserveAspectRatio:"none" 制作一个响应式 SVG viewBox，但元素没有按我预期的方式定位。边框响应 viewB 的宽高比...

html css svg responsive-design

回答 0 投票 0

responsive-design 相关问题

最新问题