responsive-design 相关问题

我有一个带有 NavBar 组件的自定义 ui 库函数 NavBar({ navItems, Sticky, maxWidth, logoUrl }: NavProps_t) { 返回粘性？（我有一个带有 NavBar 组件的自定义 ui 库 function NavBar({ navItems, sticky, maxWidth, logoUrl }: NavProps_t) { return sticky ? ( <Box className={'sticky__nav-bar__container'} position={"absolute"} zIndex={1} height={{ base: "15vh", "2xl": "30vh" }} m={0}> <Box className={cn(styles['sticky__nav-bar'])} position={"sticky"} zIndex={0} minHeight={"5rem"} height={"10vh"} width={"100vW"} maxW={{ base: "100vW", "2xl": maxWidth }} top={0} left={0}> <ResponsiveNavBar navItems={navItems} maxWidth={maxWidth} logoUrl={logoUrl} /> </Box> </Box> ) : <Box className={styles['non-sticky__nav-bar']} bg={"rgba(123, 60, 45, 0.5)"} position={"relative"} zIndex={1} top={0} minHeight={"5rem"} height={"10vh"} width={"100vW"} maxW={{ base: "100vW", "2xl": maxWidth }} > <ResponsiveNavBar navItems={navItems} maxWidth={maxWidth} logoUrl={logoUrl} /> </Box> } 一旦构建完成，我可以看到它被转换为 height: { base: "15vh", "2xl": "30vh" } 在下面第 8 行代码中 function N({ navItems: s, sticky: a, maxWidth: e, logoUrl: o }) { return a ? /* @__PURE__ */ i( c, { className: "sticky__nav-bar__container", position: "absolute", zIndex: 1, height: { base: "15vh", "2xl": "30vh" }, m: 0, children: /* @__PURE__ */ i( c, { className: h(l["sticky__nav-bar"]), position: "sticky", zIndex: 0, minHeight: "5rem", height: "10vh", width: "100vW", maxW: { base: "100vW", "2xl": e }, top: 0, left: 0, children: /* @__PURE__ */ i(p, { navItems: s, maxWidth: e, logoUrl: o }) } ) } ) : /* @__PURE__ */ i( c, { className: l["non-sticky__nav-bar"], bg: "rgba(123, 60, 45, 0.5)", position: "relative", zIndex: 1, top: 0, minHeight: "5rem", height: "10vh", width: "100vW", maxW: { base: "100vW", "2xl": e }, children: /* @__PURE__ */ i(p, { navItems: s, maxWidth: e, logoUrl: o }) } ); } 在应用程序中使用后不起作用。当我在浏览器中检查时我可以看到除响应高度之外的所有其他样式。我也用 ChakraProvider 包装了主应用程序。想知道我做错了什么。谢谢问题是该组件依次缺少 Chakra 提供程序且未配置断点。在组件库中添加上下文提供程序将通过提供默认主题来解决问题，但会覆盖使用该组件的应用程序的主题，从而导致主题问题。将 Chakra ui 标记为对等依赖项并将其从汇总中排除将确保从消费应用程序提供主题而不会发生主题冲突。有关详细信息，请参阅以下讨论https://github.com/chakra-ui/chakra-ui/discussions/4534，并感谢@goutamsamal9帮助解决这个问题。

reactjs responsive-design chakra-ui

回答 1 投票 0

页面加载时动态高度计算不正确，但在视口调整大小后正确计算

我有一个与组合一起使用的 Angular 组件，这意味着组件的标题会根据输入动态更改。我遇到的问题是，当页面加载时，高度...

angular responsive-design angular-changedetection

回答 1 投票 0

Angular - 页面加载时动态高度计算不正确，但在 Angular 中调整视口大小后正确计算

我有一个与组合一起使用的 Angular 组件，这意味着组件的标题会根据输入动态更改。我遇到的问题是，当页面加载时，高度...

angular responsive-design angular-changedetection

回答 1 投票 0

将表格单元格设为正方形

如何在不使用固定大小的情况下保证表格的每个单元格都变成正方形？当宽度改变时要做出响应。桌子 { 宽度：90%； } TD { 宽度：30%； } tr { /** w...