有什麼變化

請注意缺少<meta name="viewport" content="width=device-width, initial-scale=1">,它會禁用移動設備中網站的縮放方面。此外,我們重置了容器的寬度並更改了導航欄以防止折疊,並且基本上可以使用了。

關於導航欄

作為提示,導航欄組件在這里相當棘手,因為顯示它的樣式相當具體和詳細。覆蓋以確保桌面樣式顯示不像人們想要的那樣高性能或時尚。請注意,在使用導航欄時,在此示例之上構建時可能存在潛在問題。

瀏覽器、滾動和固定元素

非響應式佈局突出了固定元素的一個主要缺點。當視口變得比頁面內容窄時,任何固定組件(例如固定導航欄)都將無法滾動。換句話說,給定 970 像素的非響應式容器寬度和 800 像素的視口,您可能會隱藏 170 像素的內容。

沒有辦法解決這個問題,因為它是默認的瀏覽器行為。唯一的解決方案是響應式佈局或使用非固定元素。

非響應式網格系統

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