resize 相关问题

与控件，窗口，窗体或屏幕的大小调整有关的问题。

我正在制作我的网络作品集，但响应式导航栏有问题。我的菜单是一样的媒体查询中具有不同的样式。 {nav.items.map((链接，在... 我正在制作我的网络作品集，但我对响应式导航栏有疑问。我的<nav>菜单是一样的在媒体查询中具有不同的风格。 <ul> {nav.items.map((links, index) => ( <li key={index}> <a href={"#" + links.href} onClick={ !mobileNavOpen ? () => { toggleActive(index); } : () => setMobileNavOpen(false) } className={isActive(index)} > {links.title.charAt(0).toUpperCase() + links.title.slice(1)} </a> </li> )) </ul> 我用以下状态控制我的手机导航栏 const [mobileNavOpen, setMobileNavOpen] = useState(null); 当 mobileNavOpen === true 时，我将课程 "is-open" 添加到我的导航中。当我的移动菜单保持打开状态并且我将屏幕放大到超出平均查询范围时，我的问题就出现了，它仍然打开并且我想在窗口宽度超过 900px 时关闭它。然后，如果我将页面返回到小于 900 像素，移动导航将显示为打开，占据 100vw。我尝试使用 resize 事件和 matchmedia 但不是最佳性能。我需要在 mobileNavOpen === true && window.innerWidth > 900 到 setMobileNavOpen(false) 时渲染并关闭我的移动导航。这是一个最小的细节，但我需要解决它。谢谢，来自阿根廷的问候！调整窗口大小，然后将条件插入到您的 onClick: import { useState, useEffect } from 'react' export default function App() { const [windowWidth, setWindowWidth] = useState(window.innerWidth) useEffect(() => { const handleWindowResize = () => { setWidth(window.innerWidth) } window.addEventListener('resize', handleWindowResize); return () => { window.removeEventListener('resize', handleWindowResize); } }, []) } onClick={ !mobileNavOpen && windowWidth < 900 ? () => { toggleActive(index); } : () => setMobileNavOpen(false) }

css reactjs resize media-queries

回答 1 投票 0

为什么 QGroupBox 小部件不会随窗口的其余部分动态调整大小？

我有一个 QMainWindow，其中的小部件排列在网格中。当窗口按预期调整大小时，它们都会按比例调整大小，除了放置在 QGroupBox 内的小部件。 QGroupBox 本身

qt resize pyqt qwidget qgroupbox

回答 2 投票 0

使用 HTML / CSS 的多个可移动、可调整大小的窗口

我尝试仅使用 HTML / CSS 制作多个可移动的可调整大小的窗口。根据 CSS-Tricks 的这篇文章，我制作了两个窗口，它们都可以移动。然而，第二个窗口

html css drag-and-drop resize draggable

回答 1 投票 0

Flutter：在渲染之前获取未渲染小部件的大小的最佳方法是什么？

我正在尝试构建一个自定义的AppBar，其下方有一个进度栏。我使用不同颜色的带有圆形边框的动画容器。进度条的高度应为 6 px。而且它...

flutter dart mobile resize

回答 1 投票 0

输入类型“数字”不会调整大小

为什么当我将类型更改为 type="number" 时我的输入不会调整大小，但它适用于 type="text"？例子邮箱：数量: 为什么当我将类型更改为 type="number" 时我的输入不会调整大小，但它可以与 type="text" 一起使用？示例 Email: <input type="text" name="email" size="10"><br/> number: <input type="number" name="email" size="10"> 好像input类型number不支持size属性或者不兼容浏览器，可以通过CSS来设置： input[type='number']{ width: 80px; } 更新了小提琴使用不当。输入类型编号可以通过向上和向下箭头选择值。所以基本上你正在寻找“宽度”CSS样式。输入文本历史上是用等宽字体格式化的，因此大小也是它所需要的宽度。输入数字，它是新的，“size”属性根本没有意义*。典型用法： <input type="number" name="quantity" min="1" max="5"> w3c 文档要修复，请添加样式： <input type="number" name="email" style="width: 7em"> 编辑：如果你想要一个范围，你必须设置 type="range" 而不是 ="number" 编辑2：*大小不是允许的值（所以，没有意义）。查看官方W3C规范注意：大小属性适用于以下输入类型：文本、搜索、电话、网址、电子邮件和密码。提示：指定允许的最大字符数元素，使用 maxlength 属性。设置数字输入的最大值和最小值，而不是设置长度。输入框随后会调整大小以适合最长的有效值。如果您想允许 3 位数字，请将 999 设置为最大值 <input type="number" name="quantity" min="0" max="999"> 对于 <input type=number>，HTML5 CR 不允许使用 size 属性。然而，在Obsolete features中它说：“尽管本规范中其他地方有相反的要求，但作者不应该在类型属性处于 Number 状态的输入元素上指定 maxlength 和 size 属性。不管怎样，使用这些属性的一个有效原因是帮助不支持 type="number" 的输入元素的旧用户代理仍然以有用的宽度呈现文本字段。” 因此，可以使用 size 属性，但它只会影响不支持 type=number 的旧版浏览器，以便该元素回退到简单的文本控件 <input type=text>。这背后的基本原理是，浏览器应该提供一个考虑其他属性的用户界面，以实现良好的可用性。由于实现可能有所不同，作者强加的任何大小都可能会把事情搞砸。（这也适用于在 CSS 中设置控件的宽度。）结论是，您应该在或多或少流动的设置中使用 <input type=number>，不对元素的尺寸做出任何假设。你想要的是maxlength。适用于 text、search、url、tel、email 和 password，它定义用户可以在字段中输入的最大字符数（作为 UTF-16 代码单元）。这必须是 0 或更大的整数值。如果未指定 maxlength，或者指定了无效值，则该字段没有最大长度。该值也必须大于或等于 minlength 的值。您可以考虑使用以下 input 类型之一。对于“数字”类型，使用最小值和最大值而不是使用大小，输入框大小将根据最大值自动调整。例如：数量: 如果您想将 input 类型 number 字段长度设置为一定数量的字符（而不是像素），您可以按照以下方式进行： input[type=number] { width: 7ch; /* 7 characters width */ } 使用 onkeypress 事件。邮政编码框的示例。它最多允许 5 个字符，并检查以确保输入仅是数字。当然，没有什么比服务器端验证更好的了，但这是一个很好的方法。 function validInput(e) { e = (e) ? e : window.event; a = document.getElementById('zip-code'); cPress = (e.which) ? e.which : e.keyCode; if (cPress > 31 && (cPress < 48 || cPress > 57)) { return false; } else if (a.value.length >= 5) { return false; } return true; } #zip-code { overflow: hidden; width: 60px; } <label for="zip-code">Zip Code:</label> <input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required"> 将 type="number" 更改为 type="tel"

html text input resize numbers

回答 9 投票 0

仅监听窗口的宽度变化（不监听高度）

我知道 window.addEventListener('调整大小', 函数(事件) {} 和 window.onresize = 函数(事件) {} 但有没有办法只听 WIDTH 呢？我想要最简单的方法来触发电子......

javascript window resize width

回答 1 投票 0

PySide6：如何在播放 QMovie 时调整 QLabel 的大小并保持电影的原始宽高比？

我将非常感谢您帮助指定显示 QMovie 的 Pyside6 QLabel 的调整大小行为，以便保持电影的原始宽高比（例如 .gif 文件）...

python qt resize pyside6 qmovie

回答 1 投票 0

如何使 QTreeView 对象调整大小以匹配主窗口？

我正在使用 QTreeView 来显示信息，我希望它占据主窗口的整个客户区域（减去其菜单、工具栏和状态栏的区域）。当主窗口处于保留状态时...