流变格线版面网页排版.DOCVIP

手機、平板電腦、桌上電腦的綜合網頁排版 兩種方式：媒體查詢，流變格線版面 目錄 TOC \o 1-1 \h \z \u 1. 本章目的： h 2 2. 常見主流手機，平板電腦的螢幕大小與解析度 h 4 3. 方法1：媒體查詢 網頁排版 h 4 4. 方法2：媒體查詢 網頁排版 h 17 本章目的： 如何設計一個網頁，可以同時在各種平台都可以顯示：手機、平板電腦、桌上電腦都可以顯示， 方法：兩種方式網頁排版：媒體查詢，流變格線版面 手機 平板電腦 桌上電腦 常見主流手機，平板電腦的螢幕大小與解析度 主流手機(iPhone, android)的螢幕大小與解析度： 480 x 800 960 x640 平板電腦的螢幕大小與解析度 1024 x 768 桌上電腦的螢幕大小與解析度 2048 x 1536 方法1：媒體查詢 網頁排版 下載練習範本，解壓縮 Dreamweaver新增網站 web10 打開 媒體查詢.html，以chrome瀏覽 開啟手機模擬器，以手機瀏覽 等一下我們的規劃是，要建立3種CSS版面設定（CSS設定放在外部檔案） style_01.css（這是手機版面） style_02.css（這是平板電腦版面） style_03.css（這是桌上電腦版面） 製作手機版面 附加外部樣式表 開啟 媒體查詢.html 按右方『CSS樣式』面板 按『附