How TO - 典型裝置斷點
瞭解如何為常見的裝置斷點使用媒體查詢。
典型裝置斷點
存在大量具有不同高度和寬度的螢幕和裝置，因此很難為每個裝置建立一個確切的斷點。為了簡單起見，您可以針對五個常見的分組。
示例
/* 超小裝置（手機，600px 及以下） */
@media only screen and (max-width: 600px) {...}
/* 小型裝置（豎屏平板和大型手機，600px 及以上） */
@media only screen and (min-width: 600px) {...}
/* 中型裝置（橫屏平板，768px 及以上） */
@media only screen and (min-width: 768px) {...}
/* 大型裝置（筆記型電腦/桌上型電腦，992px 及以上） */
@media only screen and (min-width: 992px) {...}
/* 超大型裝置（大型筆記型電腦和桌上型電腦，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}
自己動手試一試 »
相關頁面
CSS 教程： CSS 媒體查詢
CSS 教程： CSS 媒體查詢示例
CSS 參考： @media 規則
RWD 教程： 使用媒體查詢的響應式網頁設計
JavaScript 教程： window.matchMedia() 方法
