響應式設計 改造與優化 下載 mobi epub pdf 電子書 在線閱讀 2026

編輯推薦

適讀人群 ：論你是開發人員、設計師還是産品經理，本書都將教你為所有人的所有設備成功呈現信息的原則、技術和最佳實踐。
不論你是正在積纍還是精簡你的技能集，《響應式設計、改造與優化》都是現代Web 實踐的指南精粹。Phil 獨一的技術背景和實戰經驗賦予瞭他對於底層核心程序以及像素級完美設計的敏銳洞察力。
— Web/UI 設計師Jacob R. Stuart

如今，Web 開發是不可能不考慮各種屏幕尺寸和比例因素的，因為你永遠不會知道你的用戶使用的是手機、平闆電腦還是颱式機。本書有助於構建響應式網頁設計，是一本必讀之書。
—9magnets LLC 聯閤創始人 Cameron Banga

任何一位尋找響應式設計綜閤性策略的讀者不妨讀一讀本書。Phil 在這本實踐指南中，揭開瞭為什麼和怎樣對眾多的屏幕尺寸和設備進行響應式設計的麵紗。
— WSOL 設計總監 Dennis Kardys

響應式設計的三要素（流動的網格、靈活的圖像和媒體查詢）仍然非常重要，今天創建一個網站比過去需要更多的思想和技術。本書將帶你從基礎開始，逐步瞭解現代Web 開發的來龍去脈。
— 聖母大學網絡通信係主任 Erik Runyon

Phil Dutson 提齣的移動設計的設計建議、資源和實例，有助於將設計師和開發者們聯係在一起。本書是任何一位Web 設計師的書架上都值得擁有並需反復閱讀的全麵指南。
—SEO.com 網頁設計師 Kaylee White

內容簡介

由於移動設備的大量使用，各種屏幕尺寸、各種操作係統、各種訪問設備及各種需求均對用戶體驗提齣瞭新的挑戰。為瞭讓我們的網站在各個終端上的用戶體驗都盡可能接近完美，我們需要采用響應式移動設計。本書重點介紹瞭Phil Dutson的開發經驗，主要是關於移動設備及其設計，甚至一點點代碼就可以幫助你以好的方式為數百萬手機用戶提供內容；同時，順便簡單地介紹瞭一些主題，以解決常見的響應式移動設計中可能會遇到的問題。

目錄

第 1部分　創建響應式部局
第 1章　內容事項 2
構成內容的要素 3
信息采集3
信息確認5
選擇閤適的內容 7
內容性能7
搜索引擎優化考量10
用戶期望11
討論內容滑塊 12
小結 14
第 2章　為什麼移動優先 15
瀏覽 Web 16
從小尺寸開始時的注意事項 19
網站主題20
網站導航22
營銷圖像24
網站搜索25
小結 27
第 3章　使用柵格 28
選擇柵格29
PureGrids30
Bootstrap30
Foundation31
Gridpak31
GoldenGridSystem32
Skeleton32
使用響應式柵格 32
使用自適應柵格 36
兩全其美38
小結 38
第 4章　顯示錶格數據 40
定義錶格數據 41
聯係地址列錶 41
發票和收據41
錶單41
配方和卡片42
電子郵件站點和應用42
使用錶格數據 42
顯示錶單43
使用錶格47
使用 CSS改變外觀 47
創建多個錶格 50
使用下載鏈接 53
小結 56
第 5章　使用測量單位 57
使用像素58
使用百分比60
使用 em和 rem單位63
viewport測量 65
小結 69
第 6章　使用媒體查詢 70
viewportmeta標簽71
實現突變點73
使用媒體查詢 74
IE6-8瀏覽器支持 80
設備專屬的媒體查詢80
iPad80
iPhone4S以下 81
iPhone5和 5S82
Nexus7（第二代）82
GalaxyS483
小結 83
第 7章　排版設計 84
Web字體 85
字體格式85
TTF86
EOT86
WOFF86
SVG87
瀏覽器和設備支持87
設備差異87
瀏覽器行為89
提供 Web字體91
使用字體服務 93
Google字體93
AdobeTypekit94
Fontscom94
FontSquirrel95
icon字體95
小結 96
第 8章　改造現有網站 97
選擇一個閤適的移動布局 98
塊級布局98
響應式布局100
自適應布局102
利用組件開展工作103
導航103
搜索105
內容區域105
滑塊106
鏈接107
移動化的注意事項108
不要濫用懸停 108
點擊呼叫109
模態窗口109
輸入框111
小結 112
第 2部分　使用響應式媒體
第 9章　響應式圖片114
圖片應該是響應式的115
圖片分發115
使用 JavaScript的解決方案 125
Picturefill組件 126
Pixity組件127
小結 129
第 10章　響應式視頻 130
使用視頻131
分發係統131
Limelight網絡132
Akamai133
Brightcove133
Vimeo134
YouTube135
製作適配移動設備的視頻 136
使用固定比例 137
使用本地播放器140
使用插件141
小結 142
第 11章　圖像壓縮 143
圖片類型144
JPEG/JPG144
GIF146
PNG147
WebP148
壓縮工具150
JPEGmini150
PNGGauntlet151
圖像優化工具 Radical151
ImageAlpha151
ImageOptim153
TinyPNG153
壓縮結果154
小結 155
第 3部分　性能優化
第 12章　條件JavaScript 158
為什麼使用條件 JavaScript 159
滑塊160
圖片庫160
使用條件 JavaScript162
JavaScript媒體查詢163
使用 JavaScript插件168
jRespond168
mediaCheck169
ConditionerJS169
小結 170
第 13章　Web組件 171
使用 Web組件172
Web組件示例172
音頻元素172
視頻元素174
日期輸入175
使用 DOM處理 176
ShadowDOM177
使用模闆178
編輯內容179
Web組件 Polyfill180
Polymer181
Polymer元素181
X-Tag182
使用 Brick183
小結 183
第 14章　設備檢測與服務器請求 185
設備檢測186
使用腳本檢測 186
讀取 user-agent字符串 188
實現設備數據庫190
HTTP頭部 191
使用客戶端提示 194
小結 196
第 15章　服務器優化 197
服務器配置198
Web服務器198
Apache198
Nginx199
IIS199
Tomcat200
NodeJS200
服務器插件201
SPDY201
Cache205
PageSpeed207
小結 210
第 16章　高性能與開發工具 211
開發工具212
瀏覽器開發者工具212
Chrome開發者工具 212
Firefox218
InternetExplorer223
構建工具226
Grunt226
Gulp228
小結 229

精彩書摘

響應式設計的概念來源於2010 年5 月Ethan Marcotte 發錶的一篇名為“Responsive Web Design”的文章1，其闡述瞭如何利用流式布局、媒體查詢和彈性圖片三種公知技術創建一個能夠適配不同分辨率屏幕的網站。Ethan Marcotte 認為應當利用Web 的特性來設計與開發網站：“我們可以將不同聯網設備上眾多的體驗，當作同一網站體驗的不同側麵來對待，而不要為每種設備進行單獨剪裁使得設計彼此斷開，這纔是我們前進的方嚮。雖然我們已經能夠設計齣最佳的視覺體驗，但還要把基於標準的技術也嵌入到我們的設計中去，這樣纔能使得我們的設計不僅靈活，而且能適應渲染它們的各種媒介。”響應式設計能夠麵嚮不同設備收攏並提供卓越的用戶體驗，並且這一方法不會忽視設備間的差異性，也不會強調設計師的控製權，而是選擇瞭順其自然並擁抱Web 的靈活性。
在移動互聯的浪潮下，Luke Wroblewski 最早提齣瞭移動優先的設計理念2，而響應式設計之所以叫響應式“設計”而不叫響應式“技術”，就是因為它是一項設計先行的工作。麵對移動互聯網的蓬勃發展和用戶習慣的悄然改變，從移動端開始進行響應式設計對習慣瞭PC 環境的設計師來說可能是一種挑戰，需要從思考方式和工作習慣上做齣改變。本書前半部分介紹瞭響應式移動設計的各個要素，並以實例分析如何對現有站點進行響應式移動設計的改造。
性能是響應式設計繞不開的一個話題，對於移動端來說尤為重要。按條件加載、隱藏或顯示什麼內容，都會比單一條件判斷的代碼結構煩瑣，並影響用戶體驗及維護。尤其是在移動性能上，多樣的設備具有復雜的使用環境，如何識彆設備，並讓用戶在不同設備環境下均能得到良好體驗，也是一根硬骨頭。本書的後半部分重點對於上述問題進行瞭分析，希望對於讀者的開發實踐有所幫助。
最後，希望能有更多的人在移動端實踐響應式設計，實踐齣真知，更加閤理、優雅的設計可能就齣自你的手中。

前言/序言

《代碼的藝術：優雅的Web前端實現》 前言 在信息爆炸的時代，一個網站或應用的視覺呈現不僅僅是內容的載體，更是用戶體驗的核心。我們每天都在與各種各樣的數字界麵打交道，而那些能夠抓住用戶眼球、引導用戶流暢交互的優秀設計，無一不是背後精湛代碼藝術的體現。本書並非一本關於特定技術框架的速成指南，也不是對某種設計潮流的淺嘗輒止，而是深入探討構建現代、高效、且富有錶現力的Web前端解決方案的底層邏輯與核心原則。 我們生活在一個設備多樣化的世界，從巨幅的桌麵顯示器到小巧的智能手機，用戶隨時隨地都在通過不同的屏幕訪問互聯網。這要求我們的前端開發不僅要考慮信息傳達的清晰度，更要關注用戶在任何尺寸設備上都能獲得的愉悅體驗。本書的目標，便是帶領讀者穿越代碼的迷霧，理解並掌握那些能夠讓Web界麵“活”起來的根本方法。 我們不會局限於“響應式”這個概念的錶麵，因為真正的精妙之處在於其背後驅動的思維方式和技術實現。本書將從基礎的HTML結構語義化、CSS的布局與渲染機製齣發，逐步深入到JavaScript的交互邏輯設計、性能優化策略，以及現代前端工程化工具鏈的應用。我們相信，隻有紮實掌握瞭這些基礎，纔能在瞬息萬變的技術浪潮中保持領先，創造齣真正具有影響力的Web産品。 本書適閤所有對Web前端開發懷有熱情，並希望提升自身技藝的開發者。無論你是初涉此道的新人，還是在行業中摸爬滾打多年的資深工程師，我們都希望本書能為你提供新的視角，激發新的靈感，讓你在構建Web應用時，能夠更加遊刃有餘，寫齣更加優雅、高效、且富有生命力的代碼。 第一章：HTML的靈魂——語義化的基石 在構建任何一個Web頁麵之前，我們首先需要思考的是它的骨架。HTML，作為Web內容的結構語言，其重要性不言而喻。然而，許多開發者常常將其視為簡單的標簽堆砌，忽略瞭其內在的“語義”價值。本書將深入剖析HTML的語義化原則，教會讀者如何運用恰當的標簽來描述內容的意義，而不僅僅是它的外觀。 我們將詳細講解： 核心語義標簽的精準運用： `

`, `