有什么变化

请注意缺少<meta name="viewport" content="width=device-width, initial-scale=1">,它会禁用移动设备中网站的缩放方面。此外,我们重置了容器的宽度并更改了导航栏以防止折叠,并且基本上可以使用了。

关于导航栏

作为提示,导航栏组件在这里相当棘手,因为显示它的样式相当具体和详细。覆盖以确保桌面样式显示不像人们想要的那样高性能或时尚。请注意,在使用导航栏时,在此示例之上构建时可能存在潜在问题。

浏览器、滚动和固定元素

非响应式布局突出了固定元素的一个主要缺点。当视口变得比页面内容窄时,任何固定组件(例如固定导航栏)都将无法滚动。换句话说,给定 970 像素的非响应式容器宽度和 800 像素的视口,您可能会隐藏 170 像素的内容。

没有办法解决这个问题,因为它是默认的浏览器行为。唯一的解决方案是响应式布局或使用非固定元素。

非响应式网格系统

三分之一
三分之一
三分之一