RWD 響應式網頁與斷點總整理

RWD (Responsive web design),響應式網頁設計主要是用一個網頁就可以針對 PC、Mobile、平板等裝置去呈現,在 PC 瀏覽有 PC 的呈現,Mobile 瀏覽有 Mobile 瀏覽去呈現,為了方便減少使用者在手機上縮放去瀏覽資訊。

以往設計師可能要針對各不同尺寸去做規劃設計,而工程可能就要維護很多頁的切版程式,相當累人,所以 RWD 的誕生就是為了解決這個問題,更易於維護網頁。

當然有的人會用 Bootstrap 去做 RWD,當然也可以,但是只會用而不會原理,而且每間公司不一定會用 Bootstrap,所以以下要跟各位說的是,如何不用 bootstrap,自己做 RWD。


設定 viewport

要讓頁面可以呈現 RWD 需要加一行 <meta>

<meta name="viewport" content="width=device-width, initial-scale=1">

這是 HTML 的 head 部分必須設定的 viewport。


認識 Media

基本語法:

@media(min-width: 1024px) {  /* 寬 1024 為例 */
  div {
  	font-size: 16px;
  }
}

/* 或是 */

@media only screen and (min-width: 1024px) {
  div {
  	font-size: 16px;
  }
}

/* 或是 */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  div {
  	font-size: 16px;
  }
} 

前兩個例子是當視窗寬 1024 以上的話,<div> 標籤內的字體大小為 16 px,min-width: 1024px 就是篩選條件,只有在最小寬度 1024 以上才會吃到那語法。

第三個例子是最小寬 768 以上的時候,到最大寬 1024 之間的 <div> 標籤內字體大小為 16px。


Media type 屬性

W3C 有定義 CSS Media type 屬性。

屬性說明
all適用於所有設備
braille用於盲文觸覺反饋設備
embossed適用於分頁盲文打印機
handheld適用於手持設備(通常是小屏幕,帶寬有限)
print適用於分頁和在打印預覽模式下在屏幕上查看的文檔
projection用於投影演示,例如投影儀。
請查閱分頁介質一節,以獲取有關分頁介質特有的格式問題的信息
screen主要用於彩色計算機屏幕
speech用於語音合成器
tty適用於使用固定間距字符網格的媒體
tv適用於電視類型的設備
( 內容來自 W3C CSS Media type )

如何使用?以 screen 為例:

@media only screen and (max-width: 1024px) {
  div {
    background: #ccc;
  }
}

@media 後面加上 only screen 在 and 要指定判斷的寬度。


各裝置解析度斷點

這邊整理各裝置的斷點給大家參考:

斷點寬度裝置
1440pxLaptop with HiDPI screen(橫)
1366pxiPad Pro(橫)
1280pxKindle Fire HDX(橫)、Laptop with MDPI screen(橫)、
Laptop with touch(橫)、 Nexus 10(橫)
1024pxBlackBerry PlayBook(橫)、iPad Mini(橫)、iPad(橫)、
iPad Pro(直)
960pxNexus 7(橫)
950pxLaptop with touch(直)
900pxLaptop with HiDPI screen(直)
854pxNokia Lumia N9(橫)
823pxPixel 2 XL(橫)
812pxiPhone X(橫)
800pxKindle Fire HDX(直)、Laptop with MDPI screen(直)、
Nexus 10(直)
768pxiPad Mini(直)、iPad(直)
736pxiPhone 6/7/8 Plus(橫)
732pxNexus 5X(橫)、Nexus 6(橫)、Nexus 6P(橫)
731pxPixel 2(橫)
667pxiPhone 6/7/8(橫)
640pxBlackBerry Z30(橫)、Galaxy Note3(橫)、Galaxy Note2(橫)、
Galaxy S3(橫)、LG Optimus L70(橫)、Microsoft Lumia 550(橫)、
Microsoft Lumia 950(橫)、Nexus 4(橫)、Nexus 5(橫)、
Galaxy S5(橫)
600pxBlackBerry PlayBook(直)、Nexus 7(直)
568pxiPhone 5/SE(橫)
533pxNokia Lumia 520(橫)
480pxNokia Lumia N9(直)、iPhone 4(橫)
414pxiPhone 6/7/8 Plus(直)
412pxNexus 5X(直)、Nexus 6(直)、Nexus 6P(直)
411pxPixel 2(直)、Pixel 2 XL(直)
384pxLG Optimus L70(直)、Nexus 4(直)
375pxiPhone 6/7/8(直)、iPhone X(直)
360pxBlackBerry Z30(直)、Galaxy Note3(直)、Galaxy Note2(直)、
Galaxy S3(直)、Microsoft Lumia 550(直)、Microsoft Lumia 950(直)、
Nexus 5(直)、Galaxy S5(直)
320pxNokia Lumia 520(直)、iPhone 4(直)、iPhone 5/SE(直)、
JioPhone 2(橫)
240pxJioPhone 2(直)
( 直:裝置的直向; 橫:裝置的橫向)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *