如何創建：典型設備的斷點

學習如何對常見設備斷點使用媒體查詢。

典型設備斷點

存在大量的具有不同高度和寬度的屏幕和設備，因此為每個設備創建準確的斷點是困難的。

為了簡化操作，您可以定位五個常見的組別：

實例

/* 超小設備（手機，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 @media 規則

教程：通過媒體查詢實現響應式 Web 設計

參考手冊：JavaScript window.matchMedia() 方法