`max-width` 或 `max-device-width：我應該使用哪種媒體查詢來回應式設計？

我該使用 max-device-width 還是 max-width？

TL;DR

對於響應式網站，最好在媒體查詢中使用min-width/max-width 而不是min-device-width/max- device-width來定位更廣泛的螢幕

說明

2018 年媒體查詢第 4 級規範草案中已棄用設備寬度媒體功能。他們考慮的是設備的實際螢幕尺寸而不是瀏覽器視口，這可能會導致回應行為不一致。

為什麼要用 max-width 與 max-device-width？

• max-width 以視窗大小為目標，確保跨裝置和瀏覽器視窗的反應能力大小。
• max-device-width 以裝置的實體螢幕尺寸為目標，限制調整瀏覽器視窗大小時的反應能力。

其他注意事項

• 使用視口元標記() 來控制瀏覽器視窗縮放。
• 考慮裝置特定的媒體功能（例如觸控操作）以獲得更好的觸控螢幕體驗。

進一步閱讀

• [Quirksmode.org - 像素不是像素不是像素](https://www.quirksmode.org/mobile/ prefsizes.html)
• [W3 - 媒體查詢等級 4規範](https://www.w3.org/TR /mediaqueries-4/#device-width)
• [Google 開發人員- 網路基礎知識- Viewport](https://developers.google. com/web/fundamentals/design-and-ui/responsive-design/viewport)
• [Google 開發人員- 網路基礎知識 -響應式CSS 媒體查詢](https://developers.google.com/web/fundamentals/design-and-ui/responsive-design/css-media-queries)
• [MDN - 使用視口元標記來控制佈局在行動瀏覽器上](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)

以上是`max-width` 或 `max-device-width：我應該使用哪種媒體查詢來回應式設計？的詳細內容。更多資訊請關注PHP中文網其他相關文章！