响应式网页设计（RWD）是一种Web设计和开发方法，旨在制作网站，以便根据屏幕大小，平台和方向在各种设备上提供最佳体验。
使用 React，我创建了一个应用程序，允许用户在人体图上选择一块肌肉来查看该肌肉的信息。 下一步，我现在想删除按钮...
我用谷歌搜索了这个并找到了一个怪异模式网站，可以为您提供屏幕尺寸。 拉出控制台，我看到 screen.width 和 screen.height 可以直接从 window 对象获得。 我想...
如何根据屏幕尺寸使用 go_router 有条件地嵌套路由？
我正在开发一个使用 go_router 进行导航的 Flutter 应用程序，我遇到了一个很常见的响应式设计场景，但我找不到一种直接的方法来处理路由。
平滑滚动仅有效一次： 第一个锚链接工作正常，但之后的链接会导致页面跳转而不是平滑滚动。 我正在尝试在我的
Mapbox 不适合它的容器。为什么不呢？ 这是渲染后的 html： Mapbox 不适合它的容器。为什么不呢？ 这是渲染后的html： <div class="map mapboxgl-map" id="mapBox"> <div class="mapboxgl-canvas-container"> <canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277"> </canvas> </div> </div> 那些 277px 我猜是默认值。 这是js： mapboxgl.accessToken = 'blabla'; var map = new mapboxgl.Map({ container: 'mapBox', style: 'mapbox://styles/mapbox/streets-v11', center: [-77.04, 38.907], zoom: 11.15 }); 这是scss： .map { grid-column: 1/-1; height: 100%; position: relative; canvas, .mapboxgl-canvas { height: 100%; } } 如果我将著名的 !important 添加到 height: 100%; 那么它可以工作，但地图会被拉伸。 我该怎么做？ 我找到了窍门。 只需添加 map.on('load', function () { map.resize(); }); 到 js，这样地图就会根据其容器调整大小 经过几个小时的尝试找到解决方案并在 SO 上尝试解决方案后，我终于明白了如何使 Mapbox 适合其容器。要使 mapbox 适合其容器，而不需要设置绝对高度，它必须是父 div 的直接第一个子级。 Mapbox 不能是第二个、第三个或第四个孩子等。为什么？我的猜测是 mapbox-gl.css 与自定义 CSS 规则发生冲突。 这每次都有效： <section class="map_box_container"> <!--MAP--> <div id='map'></div> </section> 这永远行不通： <section class="map_box_container"> <div class="second_child"> <!--MAP--> <div id='map'></div> </div> </section> CSS .map_box_container{ position: relative; height: 100% !important; width: 100% !important; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } 2021 年更新 我在一个新项目中使用mapbox，据我了解，mapbox 不需要其父容器具有任何CSS 才能工作。 HTML <section class="map_box_container"> <!--MAP--> <div id='map'></div> </section> CSS #map { position: absolute; top: 0; bottom: 0; width: 100%; } 这对我有用，并且在调整大小之前您不会像在接受的答案中那样看到明显的滞后： document.addEventListener("DOMContentLoaded", () => map.resize()); 将其添加到你的CSS中 .mapboxgl-map { position: absolute; top: 0; bottom: 0; width: 100%; } 和 { position: relative } 到其父 div 这个对我有用。虽然需要一段时间才能生效，但这是值得的。 map.on('load', function() { $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); map.resize(); }); 没有绝对定位的纯 CSS 解决方案。 新方法： 添加到你的包装纸中： aspect-ratio: 1 / 1; 如果您想要一个矩形，请使用该值（例如：.9）。 旧方法： 每个父级的高度必须大于 0。请检查您的开发检查器。对于每个渲染高度为 0 的容器添加 height: 100%;。然后为您的地图包装器添加这两个 CSS 声明： height: 100%; max-height: 500px; 将 500 更改为在您的媒体查询中有效的任何内容，您应该会很好。 const [viewport, setViewport] = useState({ width: '100%', height: 'calc(100vh - 162px)', // 162px is size height of all elements at the top of the map latitude: 0, longitude: 0, zoom: 12, bearing: 0, pitch: 0, transitionDuration: 2000, transitionInterpolator: new FlyToInterpolator(), }); 2022 1- 更新您的地图脚本添加 map.resize() <script> map.on("load", () => {map.resize() </script> 2- 更新您的 html 添加 tailwind class="aspect-square w-full h-full" 或添加 style="aspect-ratio: 1 / 1": <div id="map" class="aspect-square w-full h-full" style="aspect-ratio: 1 / 1;" > </div> 对于使用react-map的人（也许还有其他人），这是我解决问题的方法： <div className="flex flex-col min-h-screen" /> <h1> Hey!</h1> <Map style={{ width: '100vw', height: 'inherit', flexGrow: 1 }} /> </div> 对我来说，关键是通过将其设置为继承来杀死 Mapbox 中的 height: 100%。 注意：我使用的是 Tailwind。 我发现的唯一可靠的方法是使用 jQuery。就我而言，地图位于页面加载时不活动的选项卡中，因此我在切换到保存地图的选项卡时执行代码。 var $ = window["$"]; $('.mapboxgl-canvas').css('width', '100%'); $('.mapboxgl-canvas').css('height', '100%'); 编辑：这可行，但地图看起来很丑而且像素化。我可能会回到 Google 地图。
为什么 <img> 元素没有采用我用 CSS 告诉的确切宽度？
我正在使用 CSS 选择一个 元素并为其应用宽度，但是，当我检查浏览器生成的元素的计算值（生成的 ）时，我看到了不同的
bootstrap - 我正在开发 bootstrap 项目，我想确认我正在做正确的事情 [已关闭]
这是我在 bootstrap 上的第二个项目，但是我对它还不够熟悉。 我不会在这里发布我的代码，我会给你测试站点的网址。我认为这样做并没有错。
如何在 Safari 移动设备上禁用双击缩放？ 默认行为有一些规则： 对于文本，它在某种程度上取决于字体大小。其他类型的元素也允许双击并且
我发现这个CSS代码可以让我保持div的长宽比。 。容器 { 宽度：100%； 高度：100%； 背景颜色：红色； 位置：绝对； } .包装器{ 宽度：100%； /*
有没有办法让jplayer响应式？就是这个皮肤： http://jplayer.org/latest/demo-01-supplied-mp3/?theme=0 我想使用宽度百分比来缩放整个播放器。我尝试过使用
这是一个常见问题……但答案似乎不再有效……Safari Mobile 如何决定哪些元素允许双击缩放？ 我想禁用双击缩放......
我对最大宽度媒体规则有疑问。我测试隐藏不同最大宽度值上的元素，但行为不一致。我测试了 4 种不同屏幕宽度的场景。 场景...
这是我的网站：https://enmasantos.github.io/vitality_vista，对于我正在制作的个人项目，页脚下方有一个巨大的空白。我已经检查了页脚和
问题：在响应式视图中，当单击任何下拉内容时，下拉按钮不会从菜单图标移动到可见的导航栏。 更详细地：在响应式视图中（屏幕
我有一个导航，可以说有 12 个项目，当分辨率变小时，项目会放在新行中。我需要做到当一个项目不再适合导航时，它应该放置一个“更多”下拉...
我尝试了很多网格，从骨架到金色和引导，但我无法找到更好的解决方案。最接近的是 Grid Pack。但我不想要任何列边距。你可以...
我知道系统字体大小应该更新HTML标签的字体大小，在CSS中是1rem。所以我期望如果我不接触 HTML 字体而只在我的网站上使用 REM 单位 - 它......
我正在尝试制作 5 个图像并排等距的水平布局，并且能够随着浏览器大小的变化换行到下一行。我想使用 Flexbox/我希望这是响应...
如何让 flutter 应用响应每个 Android 设备屏幕尺寸？ [已关闭]
我在选择让应用程序响应任何设备屏幕时感到困惑。 就像 2024 年使用 mediaquery 或使用任何其他第三方软件包哪个更好 简单易行的解决方案，适合我...
Chakra 自定义组件库 - 响应式 height={{ base: "15vh", "2xl": "30vh" }} 不起作用
我有一个带有 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帮助解决这个问题。