Please enable JavaScript.

Coggle requires JavaScript to display documents.

RWD網頁 (製作 (media queries (media (max-width: 600px) {...//styles} (media…

- - - - 寫在CSS中
      - media feature
        
        width
        
        min-width
        
        max-width
        
        height
        
        max-height
        
        min-height
        
        orientation
        
        orientation=landscape
        
        寬度大於高度的瀏覽器。
        
        orientation=portrait
        
        高度大於或等於寬度
        
        運算子
        
        and
        
        or
        
        not
    - - screen
        
        開發網頁時
      - 行動優先
        
        先寫螢幕小的
    - - import url('styles.css') screen and (max-width: 670px);
      - 引入其他文件
        
        同一css格式
  - - - 不一樣的CSS樣式
    - - 各個行動裝置的尺寸
        
        320px
        
        480px
        
        960px
    - - 細微的 CSS 變化
        
        元素的邊距
        
        免文字超過頁面寬度
        
        調整圖片尺寸
  - - - 設定瀏覽器的viewpoint
        
        width
        
        瀏覽器寬度
        
        螢幕(device)寬度
        
        scale比例
        
        裝置像素
        
        CSS 像素
  - - - 版面小，能放得少
        
        內容逐漸增加
        
        行動版
        
        最簡單明瞭
      - 行動版的程式碼能放在越前面
        
        提高行動版畫面呈現給使用者的速度。
        
        瀏覽器機制
        
        逐步從第一行開始執行到最後一行
- - - - 不同的佈局