响应是用于指示通用响应式网站或Web应用程序编程或设计主题的标记。这是一个比'响应式设计'更通用的标签，它适用于你专门编写编程的情况（通常是html / css / js）。 “响应式”这个词本身就是指Web应用程序/网站在各种设备和屏幕尺寸上响应和调整其维度和交互性的能力。
我是 HTML/CSS 的初学者 我想创建我的作品集，首先我尝试添加最简单的元素，首先，我需要我的所有背景。我的主页是一个大的可滚动页面，所以我想要我的 BG fi...
我希望所有示例 HTML 结构都适合 1 个屏幕而不滚动，图像必须适当调整大小。但仍然有滚动。 我希望所有示例 HTML 结构都适合 1 个屏幕而不滚动，图像必须适当调整大小。但还是有滚动。 <div style="position: fixed; top:0;left:0;width:100vw;height:100vh;background:red;z-index:100000;display:flex;flex-direction:column"> <div style="background:green">aaa</div> <div style="flex-grow:1"> <img src="https://placehold.co/3200x3200" style="width: 100%; height: 100%; object-fit: contain;"> </div> <div style="background:blue">bbb</div> </div> 围绕图像的 div 没有设定高度，并且与图像的高度相匹配。这会导致图像比屏幕大。尝试将 div 的高度设置为 100%。这将匹配其父母的高度，即屏幕高度。 这是一个例子： <div style="position: fixed; top:0;left:0;width:100vw;height:100vh;background:red;z-index:100000;display:flex;flex-direction:column"> <div style="background:green">aaa</div> <div style="flex-grow:1;height:100%"> <img src="https://placehold.co/3200x3200" style="width: 100%; height: 100%; object-fit: contain;"> </div> <div style="background:blue">bbb</div> </div> 这是您要找的吗？
我想实现像这样渲染的东西，具体取决于屏幕尺寸： +----------------------------------------+ |一个 |乙| C | +----------------------------------------+ +----------------+ ...
我有以下CSS代码： @media only 屏幕和（最大宽度：480px）{ #globalnav-bag .ac-bag-flyout-container .ac-gn-bagview-button { 宽度：100% } } 该酒店知道...
我能够使我的分页正常工作，但是当我希望用户更改他们看到每个页面的项目数量时，它只会对第一页进行分页并显示剩余的资源...
我已经建立了自己的网站。 https://mcsimi.netlify.app。 目前在移动设备上滚动浏览网站存在问题，因为您无法滚动超过第一个 div，因为那里有
我似乎无法获取网站右侧的人的图像来填充剩余空间，这是一个CSS问题，但无法解决。 那么显然我需要整件事......
我已经在 app.scss 中定义了断点。单一条件断点按预期工作，但条件最小和最大宽度的断点可能至少是问题所在......
CSS中的“.responsive”是什么？这是预定义的 css 功能吗，因为在下面提到的代码中我们没有在 html 中指定响应类
在下面提到的代码中，我们使用“.responsive”，但我们没有在 HTML 中提到“responsive”类，我们如何使用“.responsive”在 css 中访问它，我们有...
汉堡菜单图标应位于右侧，图像应位于左侧站点。 当我们单击菜单打开时，它应该打开一个下拉菜单，里面应该是徽标主页 A...
如何使用 Bootstrap 5 将砌体布局仅应用于平板电脑视口
请告诉我如何将砌体布局仅应用于平板电脑视口（col-md-6），笔记本电脑视口（col-lg-4）正常使用引导网格。我完成了笔记本电脑视口，但平板电脑视口重新...
我正在尝试在背景图像上对齐文本，但是当我调整浏览器窗口大小时，文本会跳到图像之外。 我想用图像设置响应文本。如果我调整浏览器大小...
我有一个网格，其中包含来自（wordpress）画廊的项目。在制作响应式布局时，如果我有垂直空间（行跨度）来覆盖它，我希望能够调整网格并旋转图像......
创建一个带有 4 个带有文本和徽标引导程序的响应式按钮的 div 5
我有一个 HTML/CSS/Bootstrap 5/JS 和 Rust/Actix-web webapp。代码 在索引页面中，我有一个导航栏和一个 div，中间有四个按钮（垂直、水平）。实际机制...
（https://github.com/Shaakie/Web-Development.git） 我正在编写一个包含 3 个部分的响应式网站，每个部分都包含一个带有标签的 div 和一个段落。Div 的高度在减小时发生变化/
当屏幕低于 576 像素时显示 3 个按钮，在更宽的屏幕上不可见
我试着让这些按钮出现，但它从来没有用过！ 我终于找到了一个代码，在该代码上它们永远不可见，并且应该出现在 576 px 以下： 但这只是 vi 的导航栏图标...
我正在尝试制作一个简单的 paper.js 演示响应式，以便它具有固定的画布宽度和高度属性，并在调整窗口大小时按比例缩小。 这是现场演示： https://jsfiddle.net/
我一直在寻找在 flutter 中保持响应维度值的最佳方法。我没有找到适合我需要的东西。我希望它非常易于使用，而不是检查每个...
我要使用下面的 HTML 和 CSS（链接）创建一个类似响应式的网站。我们可以使用任何图像和任何颜色，只是布局和响应必须相同。 计算机视图 男...
我的网页上有两个主要容器：1. 和 2.。 我的，我的第一个内容 我的网页上有两个主要容器：1.<div class="main"> 和 2.<section class="main-cars">. 我的<div class="main">，我网页的第一个内容，是一个在后台播放的视频（在一些标题后面）的 Vimeo 集成。这个容器在计算机上完美呈现，并且在计算机上模拟的所有响应设备上。但是，当涉及到在我的智能手机上加载页面时，1. 容器溢出了一点 2. 容器。附上截图： 下面是它应该是这样的，以及用 Responsive Viewer 模拟时的样子： 如您所见，应用在我的 1. 容器上的线性渐变溢出了我的第二部分（白色部分）。这很难解决，因为它只发生在手机上，而不是计算机上的模拟手机。 .main { top: 0; background-color: #111111 i !important; margin-top: 0px; height: 60em; width: 100%; display: flex; flex-direction: column; height: 100%; } .header-c { position: absolute; top: 0; left: 0; right: 0; z-index: 99; } .header { display: flex; flex-direction: row; padding-top: 0.2333333333rem !important; padding-bottom: 0.175rem !important; margin-left: 5%; margin-top: 1em; } .container-main { position: relative; display: flex; height: 100%; align-items: flex-end; overflow: hidden; min-height: 100vh; } .cont { z-index: 1; background-color: rgba(0, 0, 0, 0.4); height: 100%; width: 100%; display: flex; justify-content: flex-start; } .ttt { display: flex; flex-direction: column; padding-right: 5em; margin-top: auto; margin-left: 5%; margin-bottom: 10em; } .fluids { position: absolute !important; display: flex !important; overflow: hidden !important; height: 100%; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 177.777778vh !important; } .vid { width: 100%; max-width: 100%; position: relative; } .fluidvids-item { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } img, video, iframe { max-width: 100%; display: block; } /* SECTION CODE*/ .main-cars { display: flex; justify-content: center; flex-direction: column; background-color: #fff; position: relative; } <div class="main"> <div class="header-c"> <div class="header"> <div class="logo-c"> <img src="FinanceUI.png" alt="" class="logo"> <div class="logo-title-c"> <span class="logo-m">Ghost-Cars</span> <span class="loc-logo">Paris - Cannes - Monaco</span> </div> </div> </div> </div> <div class="container-main"> <div class="cont"> <div class="ttt"> <div class="c-c">Luxury Cars Rentals <br class="br"> with style.</div> <div class="lang-c"> <p class="lang">Français</p> <p class="lang underline">English</p> <p class="lang">Polski</p> </div> </div> </div> <div class="fluids"> <div class="vid"> <iframe id="recruiting-video-cover" class="transition-opacity fluidvids-item" src="https://player.vimeo.com/video/823655290?h=114a4fac97&autopause=1&autoplay=1&background=1&loop=1&muted=1&playsinline=1&transparent=1&texttrack=false;app_id=58479" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" style="pointer-events: none; opacity: 1;" title="Join us in shaping the future of technology" data-fluidvids="loaded" data-ready="true" autoplay=1 loop=1></iframe> </div> </div> </div> </div> <section class="main-cars"> <!-- SOME CODE--> </section> 我尝试申请一个position: relative;，结果在屏幕上。此外，使用 z-index: 100;第 2 节位于主 div 之上，因此它可以工作但会溢出 1. 容器：不是解决方案。 如有需要，网站位于：financeui.org