Ellie's Blog
0%

RWD 01 基礎 - 什麼是RWD + 建構 RWD 的第一步

發表於 更新於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

前端工程師基礎 RWD 教學(一)RWD 基礎概念 @ 重金屬 AI 工程師的 Coding 分享 :: 痞客邦 ::

前端工程師的基礎 RWD 教學(一)RWD 基礎概念

什麼是 RWD

  • 網頁的各種元素，以可以縮放、浮動的區塊來做配置，讓網頁中的各種元素，能隨著不同的瀏覽介面，而自動縮放大小以及調整排版。
  • 響應式網站 (RWD) 是基於核心三個概念的技術的組合:
    • 流動布局（Fluid Grid）
    • 流動圖片 (Fluid Images)
    • 及媒體查詢（Media Queries）

建構 RWD 網站的第一步

  • 在 HTML 開始的地方加入「Viewport」語法。語法如下：
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=0.5, user-scalable=no">
  • width=device-width
  • initial-scale=1.0 「初始的比例」
  • maximum-scale=1.5 最大的縮放尺寸
  • minimum-scale=0.5 最小的縮放尺寸」
  • user-scalable=no 是否允許使用者自行縮放

核心三個概念 : 流動布局（Fluid Grid）

  • 在流動布局中，寬度也常以百分比 (%) 為單位

流動圖片 (Fluid Images)

  • 流以百分比 (%) 為單位。
  • 在 RWD 網頁中圖片的顯示方式有兩種，
    • 一種是傳統的「<img>」標籤，
    • 另一種就是直接使用 CSS 的背景圖。
  • 使用「<img>」標籤時
    • 只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，
    • 另一個則設為 auto 則可以達到 RWD 的效果，
    • 範例如下：
      1
      2
      3
      4
      #banner {
        max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/
        height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/
      }
  • CSS3 的新屬性「background-size」
    • 可以指定背景圖片的大小是否可填滿整個容器
      1
      2
      3
      #banner {
        background-size: cover;
      }

核心三個概念 : Liquid Layout (液態排版)

前端工程師的基礎 RWD 教學(二)流動布局 Fluid Grid

1
div｛ width: 36% ｝

核心三個概念 : 媒體查詢（Media Queries）

  • 就是網頁會先「查詢（query)」「媒體 ( media )」的屬性，再針對這些屬性值而決定要給網頁什麼樣的樣式

Media Query 使用方法

HTML 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：

  • <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">

CSS 中使用

也可使用 @import

  • @import “screen.css” screen and (max-device-width: 400px)

常用媒體類型 (media-type) 的為

  • all (所有裝置)、
  • screen (螢幕裝置)、
  • print (印刷裝置)

常見媒體特徵 (Media Features) 有

前端工程師的基礎 RWD 教學(六)Media Query 基礎之 Media Features-上

  • min-width (最小寬度)、
  • max-width (最大寬度) 、
  • resolution (解析度)、
  • color (顏色) 等。