Home Web CSS

RWD (響應式網頁) 讓我們的網頁在各裝置都能漂亮的呈現，能夠適應不同大小的螢幕。

# RWD Viewport

就是視窗的意思，使用者能看到的頁面範圍。

# Setting the Viewport

使用 HTML <meta> 標籤。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width 設定視窗的寬度跟隨裝置的螢幕寬度。
  • initial-scale=1.0 設定初始的視窗縮放比例，1 表示為 100%。

# Grid View

grid 小遊戲

https://cssgridgarden.com/#zh-tw

我們將網頁分成網格 (rows, Columns) 來看，這讓我們更方便的排版。

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

# Building a Responsive Grid-View

首先，將所有 HTML 元素都設置成 border-box ，確保 padding 和 border 都將算在總寬度和總高度內。

* {
    box-sizing: border-box;
}

設置 12 行的方法如下:

  • 每行寬度: 100% / 12 columns = 8.33%
  • 建立一個類別定義 12 種寬度 class = "col-" ，用數字編號來代表要延伸幾格。

Example

一次定義好每個寬度都要有的樣式。

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

數字編號表示拓展幾格。

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

由於 columns 都設置了 floating: left 的關係，其他元素將會當他們不存在。為了避免這種狀況，我們設置以下樣式來清除浮動。

row::after {
    content: "";
    clear: both;
    display: table;
}

Example

# Media Query

@media 區塊定義某些條件下要套用的 CSS 樣式。

Examplelinks
@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

# Add a Breakpoint

設置中斷點來區隔不同裝置上要套用的樣式。

Examplelinks
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
我們也可以設置多個中斷點來適應更多不同的裝置。
Examplelinks
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
# Typical Device Breakpoints
市面上大大小小的裝置太多了，很難準確定義出精準的中斷點，這裡有五個比較簡單區分的中斷點。
Examplelinks
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
# Orientation: Portrait / Landscape
  • portrait : 當螢幕的寬度小於高度的時候套用。
  • landscape : 當螢幕的寬度大於高度的時候套用。
Examplelinks
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
# Hide Elements
  • 另一個常用的方法就是在不同螢幕大小下，顯示 / 隱藏元素。
  • 利用 display 。
Examplelinks
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
# Change Font Size
當然，調整字體大小也是一定要的。
Examplelinks
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}