视口是计算机图形中的矩形视图区域，或用于光学组件的术语。它在不同的上下文中有几个定义。视口是屏幕的一个区域，用于显示要显示的总图像的一部分。它也可以是一组共同构成一个布局的区域。
我想创建一个包含 3 的 ，每个 100vw 宽。 我不知道为什么，但我只能看到其中的两个（第一个是 m... 我想创建一个包含 3 个<div class="chapters"> 的<div class="chapter">，每个 100vw 宽。 我不知道为什么，但我只能看到其中的两个（第一个不见了），而网络检查器却显示了它们。 这是我的代码： .container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .chapters { background-color: bisque; flex-direction: row; min-width: 100vw; } .chapters .chapter { min-width: 100vw; height: 100vh; background-color: red; border: 1px solid white; } <div class="container chapters"> <div class="chapter"></div> <div class="chapter"></div> <div class="chapter"></div> </div> 开始时，我没有使用 min-width .chapter 所以我的所有 3 个 div 都是可见的，但它们是 100/3 vw 宽。 我尝试使用 width 而不是 min-width 来表示 .chapter**s**，或者使用 % 而不是 vw 但没有任何效果。此外，我试图删除所有其他 HTML 元素，或删除我所有的脚本，但它并没有改变一件事。 禁用弹性项目的收缩。最小的例子： /* using 100% height instead of 100vh to avoid vertical scrollbar */ html { height: 100%; } body { height: 100%; margin: 0; } .chapters { height: 100%; display: flex; } .chapter { flex-shrink: 0; width: 100%; } .chapter:nth-child(1) { background-color: red; } .chapter:nth-child(2) { background-color: green; } .chapter:nth-child(3) { background-color: blue; } <div class="container chapters"> <div class="chapter"></div> <div class="chapter"></div> <div class="chapter"></div> </div> .container { width: 100vw; height: 100vh; display: flex; justify-content: flex-start; /* or flex-end */ align-items: center; } .chapters { background-color: bisque; flex-direction: row; min-width: 100vw; } .chapters .chapter { min-width: 100vw; height: 100vh; background-color: red; border: 1px solid white; } <div class="container chapters"> <div class="chapter"></div> <div class="chapter"></div> <div class="chapter"></div> </div>
Bootstrap 5 offcanvas inside container
我正在尝试在响应式设计中使用 Bootstrap 5 offcanvas。使用移动设备时一切正常，因为画布是相对于视口的。然而，当使用更大的屏幕时，我使用
HTML \ \ \ HTML \<section class="about" id="two"\> \<div class="about-1"\> \<img src="./Images/person.jpg" alt="" class="img-2"\> \</div\> \<div class="about-2"\> \<h2\>About \<span id="low"\>Me\</span\>\</h2\> \<h3 id="heading"\>Frontend Developer\</h3\> \<p\>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa eos iure sed similique quibusdam aspernatur doloremque commodi voluptate. Non est, eius ex, eveniet fugiat delectus repudiandae. Eius, doloremque dolores incidunt suscipit assumenda aliquam nemo dicta repellendus, in quaerat recusandae laboriosam natus. Cupiditate eum, asperiores quod nulla quae dolor perspiciatis aspernatur.\</p\> \<a href="#" class="btn-1"\>Read More\</a\> \</section\> \<section class="services" id="three"\> \<h2 id="buy"\>Our \<span id="buy-1"\>Services\</span\>\</h2\> \<div class="services-1"\>\</div\> \</section\> CSS .about{ display: flex; height: 100vh; justify-content: space-between; gap: 100px; align-items: center; width: 100%; margin: auto; padding: 70px 120px 0 120px; background: #323946; } .img-2{ max-width: 450px; height: 450px; border-radius: 40px; border: 10px solid #0ef; box-shadow: 0px 0px 4px 0px #0ef; } .about-2{ margin-bottom: -50px; } h2{ font-size: 3em; font-weight: 700; padding-bottom: 0; margin-bottom: 0; margin-top: -100px; } #low{ color: var(--color1); } #heading{ margin-top: 0; padding-top: 0; } .btn-1{ display: inline-block; text-decoration: none; margin-top: 50px; border-radius: 30px; background: var(--color1); padding: 14px 28px; box-shadow: 0 0 10px var(--color1); transition: .7s; font-weight: 600; } .services{ height: 100vh; } 我的section tag设置为100vh但是这个section的内容一直在侵占上一个section 标签 我预计关于部分为 100vh，服务部分为 100vh，但根据我使用的背景颜色，服务部分未达到 100vh。 你可能应该包括： * { padding: 0; margin: 0; } 这将概括填充和边距以适合。 接下来，您可以将高度设置为 100%。 如果有效，请告诉我。
我需要根据视觉视口的宽度更改元视口标签。我知道怎么做，但它不起作用。我认为这是因为该网站运行那部分 JS 太晚了......
如何让这个函数在滚动100vh后添加类？ 目前它在 850px 之后添加了类。 $("文档").ready(函数($){ var nav = $('#verschwinden'); $(window).scroll(有趣...
我在 Chrome 检查器（移动设备模式）中测试我的网站并注意到当屏幕宽度变得小于大约 350px 时，页脚开始缩小，如图所示 https://i.stack.i...
当我打开键盘（仅在 safary 中）时，页面可以滚动到更多，然后这里的内容末尾是空白的 我试过像这样使用不同的视口，但没有帮助
我有一个基本的 HTML 文档设置，我希望 div 具有视口的高度。但是，一旦我将 height:100vh 添加到 .main div，身体上方就会有一个空隙，并且有一个垂直的 s...
如何在给定 x 和 y 坐标的情况下将 d3js 树节点移动到视口的中间
程序搜索特定节点，一旦找到，函数 scrollToBottom 应该将视口移动到节点的 x 和 y 坐标并将其定位在视图的中心底部...
当搅拌机运行模态时，无法移动视口。 有没有办法阻止这个视口阻塞？
请原谅我的无知，因为我是 html 编码的新手。是否可以使用不同的 img 标签来塑造不同的部分？我想更改图像类名称然后调用该类
Iphone X视口从纵向切换到横向会导致页面顶部无法点击。
在iPhone X上，页面顶部的链接在从纵向旋转到横向后变得无法点击的问题。在纵向模式下，点击 "隐藏工具栏"，然后旋转到横向。使用...
我想知道，如果有可能摆脱垂直滚动有3行在移动设备上观看，应该fitstretch到屏幕的高度，并缩小时，屏幕的高度较小......
angularng-bootstrapcss 如何防止在任何显示中使用前100px，而不是设置为固定顶部的头部？
angularng-bootstrap上下文：可能对各位专家来说是显而易见的答案，但我试了很多天都没有成功。我的头部在固定顶部的配置是正确显示。我的内容在一个...
如何在2D游戏中，在摄像机进入房间之前，在设定的视口位置实例化敌人？(或其他解决方案!)
我目前正在制作一款2D游戏，我想在关卡中预置遭遇战，我希望当玩家进入房间时，敌人已经在房间里了。现在的遭遇是在玩家进入房间时触发的。
了解document.documentElement.clientWidthHeight返回的是哪个视口，以及与window.innerHeightinnerWidth的区别。
我对JavaScript和DOM中的viewport概念有点困惑，尤其是document.documentElement.clientWidth，它应该返回viewport的宽度。事实上，document....
我想获取的是当前（滚动到用户视图中）在浏览器中可见的文本。问题1：什么样的jQuery选择器或过滤器可以完成这项工作？问题2：我想捕捉所有的文本，并且只捕捉文本......。
我一直在尝试在我们的新网站上建立一个响应式按钮，例如，将主体宽度更改为460像素，以显示我们的网站在移动设备上的外观。我已经看到使用iframe作为...
任何想法如何将100px转换为100vw？ $（document）.ready（function（）{$（window）.scroll（function（）{如果（$（document）.scrollTop（）> 100）{$（“。header”）。css（“ color”， “ #fff”）; ...
我创建了一个1000×1000 svg，但是当我在Chrome浏览器中运行它时，如果视口大小小于1000，则该svg图像会自动被裁剪，尽管如此，我并没有亲眼目睹...