responsive-design 相关问题

我想弄清楚如何根据屏幕尺寸旋转 div 中的图像。基本上有这样的设置：在液体中... 我正在尝试弄清楚如何根据屏幕尺寸旋转 div 中的图像。基本上有这样的设置： <div> <div with arrow pointing right > <div> 在流体行（引导程序）中，我需要箭头图像旋转 90 度到向下位置，因为在移动设备中时，div 会堆叠。我考虑过使用空白<div>和背景图像和媒体查询来更改图像，但是必须有一个具有设置像素尺寸的空白<div>并不是很好（或者是吗？）。另一个想法是在 <img> 内有一个 <div> 箭头，也许可以使用 jQuery 根据屏幕大小旋转它，但似乎很 OTT，并且可能超出我的能力来弄清楚如何做到这一点。任何建议或提示都将受到欢迎。也许我错过了一些非常简单的东西。 @Stuart 的解决方案效果很好——这是使用 CSS 的另一种可能性。这不一定是更好的答案，只是不同而已。 https://codepen.io/panchroma/pen/MWZKgwJ HTML <img src="../image1.jpg" class="rotateMobile"> CSS @media (max-width: 480px) { .rotateMobile{ transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } } 祝你好运！如果您使用两个不同的图像创建两个独立的相同元素，您可以将其中一个设置为以一种尺寸显示并隐藏另一个，反之亦然。例如： HTML <img class="arrow" src="arrow.png" /> <img class="arrow90" src="arrow90.png" /> CSS .arrow{display:block;} .arrow90{display:none;} @media handheld, only screen and (max-width: 491px) { .arrow{display:none;} .arrow90{display:block;} }

image twitter-bootstrap rotation responsive-design

回答 2 投票 0

如何使第一列统计，而其他列仅在移动屏幕上水平滚动？

如何才能达到预期的结果，使第一列 Produto 保持静态，而用户可以滚动浏览其他列并填写移动屏幕上的空白？身体 { 夫...

html css responsive-design

回答 1 投票 0

根据高度保持div长宽比

我需要将元素的宽度保持为其高度的百分比。因此，随着高度的变化，宽度也会更新。通过使用 padding-top 的 % 值可以实现相反的效果，但是 paddin...

css responsive-design aspect-ratio

回答 7 投票 0

使用 HTML 和 CSS 创建自定义组织结构图布局

我正在尝试使用 HTML 和 CSS 创建自定义组织结构图布局，但在实现所需的布局时遇到一些困难。我在下面提供了我当前的代码以及简短的

html css bootstrap-4 responsive-design

回答 1 投票 0

如何实现给定的CSS玻璃效果和泄漏的颜色？ [已关闭]

我想重新创建这张玻璃卡，但我不知道如何实现这一点我可以获得玻璃效果，但无法实现这种模糊颜色效果，我使用了 CSS 的背景滤镜属性，但它不是

html css responsive-design blur card

回答 1 投票 0

根据屏幕尺寸响应式引导按钮

我希望这个按钮能够响应，自动调整其大小以适应各种屏幕尺寸。在下面的代码中按钮是固定的并且不移动。这是代码。我希望这个按钮能够响应，自动调整其大小以适应各种屏幕尺寸。在下面的代码中按钮是固定的并且不移动。这是代码。 <button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened" (click)="open()">Login</button> CSS代码： #btnLogin1 { background-color: #0057b8; border: 1px solid #0057B8; color: #fff !important; height: 35px; width: 200px; font-size: large; margin: 35px 0 0; padding: 25px 100px; font-weight: 700; border-radius: 10px; } 您可以通过使用媒体查询来实现这一点。如以下代码所示。 #btnLogin1 { background-color: #0057b8; border: 1px solid #0057B8; color: #fff !important; height: auto; max-width: 300px; font-size: large; margin: 35px 0 0; padding: 25px 100px; font-weight: 700; border-radius: 10px; } @media screen and (max-width: 767px) { #btnLogin1 { height: auto; max-width: 200px; padding: 25px 50px; } } <button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened" (click)="open()">Login</button> 尝试使用 vmin 或 vmax 单位。如果您不想使用媒体查询，请找到适合您的完美值。有关其工作原理的参考信息，请查看此博客：CSS Units

css angular responsive-design bootstrap-5

回答 2 投票 0

如何在 Bootstrap 5 中将一个 div 移动到另一个 div 之上

我正在使用 Bootstrap 5 制作一个网站，我试图使该网站在所有设备上响应更快。当有人使用移动设备时，我希望保存图像的 div 位于上方...

html css responsive-design frontend bootstrap-5

回答 1 投票 0

根据引导程序的设备大小在元素上应用边框

我正在使用 bootstrap 创建移动优先响应式布局，并设置各种行和列，并根据不同类别的屏幕尺寸进行调整。我想知道是否有纯的

css responsive-design media-queries border bootstrap-4

回答 7 投票 0

用垂直线给出数字以响应方式列出项目（HTMl 和 CSS）

我想使用 HTML 和 CSS 创建一个列表，如下所示：预期输出：但低于输出。实际输出：如您所见，该行在文本和数字上折叠。我想要