編輯推薦
1.介紹新的響應式解決方案。
2.深入淺齣,從基礎觸發,逐步引入更高階技術。
3.注重實戰,將知識運用到實踐中,解決正在遇見或者即將遇見的問題。
4.知其然並知其所以然,瞭解技術的前生今世;開拓思維,挖掘更多的解決方案。
內容簡介
響應式Web設計的理念是讓頁麵根據用戶行為以及設備環境(屏幕尺寸、分辨率等)進行相應的響應和調整。響應式網頁設計就是一個網站能夠兼容多種終端,而不是為每種終端做一個特定的版本。
本書分為兩部分,首部分是前端的基本響應式技術,涉及響應式布局、圖片的處理、解決問題的思路以及一些進階的技巧等;第二部分在以上內容的基礎上,加入瞭對頁麵進行性能調優的內容,包括如何確立性能指標,如何使用不同的工具衡量性能,以及如何解決常規的性能問題等。
本書適閤有興趣學習響應式技術的前端從業人員和其他相關人員閱讀。
作者簡介
李光毅 曾就職於愛奇藝,現任百度高級前端工程師,主要負責前端Web 産品開發, 以及後端Node.js 框架維護。 在HTML、JavaScript 等前端技術方麵略有心得,喜歡對Web 性能吹毛求疵,同時也對ASP.NET、MongoDB、Python 等技術有著濃厚的興趣。業餘時間曾經喜歡摺騰硬件編程,如Kinect for Windows、Leap Motion 等,現在愛好使用Unity 寫遊戲。熱愛前端,樂於分享。
目錄
第1章 概述及任務介紹 1
1.1 為什麼需要響應式設計 1
1.1.1 産品形態需要 1
1.1.2 性能與商業考慮 3
1.2 本書的綫索 3
1.3 寫作思路 4
1.4 定義響應式 5
1.5 本書任務 6
第2章 響應式中要麵對的問題 9
2.1 像素密度 9
2.2 CSS像素 14
2.3 視口 17
2.3.1 桌麵瀏覽器的視口 17
2.3.2 移動設備瀏覽器的視口 18
2.3.3 設備寬度 20
小結 21
第3章 布局 23
3.1 寫在編碼前的話 23
3.1.1 寫齣好的代碼 24
3.1.2 代碼的瀏覽器適配問題 25
3.1.3 仰望星空與腳踏實地 26
3.2 全局樣式 27
3.3 無懈可擊的導航欄 30
3.3.1 桌麵端 30
3.3.2 移動端導航欄 37
小結 40
第4章 布局——響應式篇 41
4.1 媒體查詢 41
4.1.1 為什麼需要媒體查詢 41
4.1.2 什麼是媒體查詢 44
4.1.3 媒體查詢中的邏輯 45
4.1.4 媒體查詢的策略 46
4.1.5 導航欄與媒體查詢 51
4.1.6 polyfill 56
4.2 伸縮布局 58
4.2.1 為什麼需要伸縮布局 58
4.2.2 快速入門 58
4.2.3 基本應用 60
4.2.4 迴歸導航欄flexbox.css 62
4.3 相對單位 63
4.3.1 相對單位em 65
4.3.2 相對單位rem 67
4.3.3 如何使用這幾種單位 68
4.4 標題布局 70
4.4.1 背景 71
4.4.2 文字居中 73
4.5 響應式文字 79
4.5.1 標題 79
4.5.2 正文內容 83
小結 89
第5章 響應式圖片 91
5.1 萬能的100% 91
5.2 響應式圖用例 93
5.3 srcset語法 96
5.3.1 移動優先或桌麵優先 97
5.3.2 計劃趕不上變化 98
5.3.3 傢長式管理 99
5.4
前言/序言
高性能響應式Web開發實戰 下載 mobi epub pdf txt 電子書