名詞解釋：
Web標(biāo)準(zhǔn)：WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3C DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由萬維網(wǎng)聯(lián)盟（外語縮寫：W3C）起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（European Computer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。
HTML5：萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改（這是一項(xiàng)推薦標(biāo)準(zhǔn)、外語原文：W3C Recommendation）
CSS3:CSS3是CSS（層疊樣式表）技術(shù)的升級(jí)版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
Sublime:Sublime Text 是一個(gè)代碼編輯器（Sublime Text 2是收費(fèi)軟件，但可以無限期試用），也是HTML和散文先進(jìn)的文本編輯器。Sublime Text是由程序員Jon Skinner于2008年1月份所開發(fā)出來，它最初被設(shè)計(jì)為一個(gè)具有豐富擴(kuò)展功能的Vim。
Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時(shí)項(xiàng)目切換，多選擇，多窗口等等。Sublime Text 是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng)。github:gitHub是一個(gè)面向開源及私有軟件項(xiàng)目的托管平臺(tái)，因?yàn)橹恢С謌it 作為唯一的版本庫格式進(jìn)行托管，故名gitHub。
gitHub于2008年4月10日正式上線，除了git代碼倉庫托管及基本的 Web管理界面以外，還提供了訂閱、討論組、文本渲染、在線文件編輯器、協(xié)作圖譜（報(bào)表）、代碼片段分享（Gist）等功能。目前，其注冊(cè)用戶已經(jīng)超過350萬，托管版本數(shù)量也是非常之多，其中不乏知名開源項(xiàng)目 Ruby on Rails、jQuery、python 等。網(wǎng)頁設(shè)計(jì)：網(wǎng)頁設(shè)計(jì)（web design，又稱為Web UI design，WUI design，WUI），是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。
網(wǎng)頁設(shè)計(jì)一般分為三種大類：功能型網(wǎng)頁設(shè)計(jì)（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設(shè)計(jì)（品牌形象站）、信息型網(wǎng)頁設(shè)計(jì)（門戶站）。設(shè)計(jì)網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計(jì)方案。
網(wǎng)頁設(shè)計(jì)的工作目標(biāo)，是通過使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計(jì)美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗(yàn)。高級(jí)的網(wǎng)頁設(shè)計(jì)甚至?xí)紤]到通過聲光、交互等來實(shí)現(xiàn)更好的視聽感受。
網(wǎng)頁設(shè)計(jì)主要以Adobe產(chǎn)品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動(dòng)畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。Flash:Flash是一種動(dòng)畫創(chuàng)作與應(yīng)用程序開發(fā)于一身的創(chuàng)作軟件，到2013年9月2日為止,最新的零售版本為AdobeFlash ProfessionalCC（2013年發(fā)布）。Adobe Flash Professional CC為創(chuàng)建數(shù)字動(dòng)畫、交互式Web站點(diǎn)、桌面應(yīng)用程序以及手機(jī)應(yīng)用程序開發(fā)提供了功能全面的創(chuàng)作和編輯環(huán)境。Flash廣泛用于創(chuàng)建吸引人的應(yīng)用程序，它們包含豐富的視頻、聲音、圖形和動(dòng)畫?？梢栽贔lash中創(chuàng)建原始內(nèi)容或者從其它Adobe應(yīng)用程序（如Photoshop或illustrator）導(dǎo)入它們，快速設(shè)計(jì)簡(jiǎn)單的動(dòng)畫，以及使用Adobe ActionScript 3.0開發(fā)高級(jí)的交互式項(xiàng)目。設(shè)計(jì)人員和開發(fā)人員可使用它來創(chuàng)建演示文稿、應(yīng)用程序和其它允許用戶交互的內(nèi)容。Flash可以包含簡(jiǎn)單的動(dòng)畫、視頻內(nèi)容、復(fù)雜演示文稿和應(yīng)用
RWD:響應(yīng)式網(wǎng)站設(shè)計(jì)(簡(jiǎn)稱RWD)是一種新的網(wǎng)站設(shè)計(jì)模式，以此構(gòu)建的網(wǎng)站可自動(dòng)適應(yīng)不同的訪問設(shè)備(從桌面電腦、平板電腦到智能手機(jī))，方便用戶閱讀和導(dǎo)航瀏覽，減少用戶的放大/縮小/滑動(dòng)操作，從而提供完整而友好的用戶體驗(yàn)。
響應(yīng)式網(wǎng)站設(shè)計(jì)有三個(gè)關(guān)鍵組成部分：1. media query; 2. 流動(dòng)網(wǎng)格；3. 靈活縮放的圖片。
基于RWD而設(shè)計(jì)的網(wǎng)站利用CSS3 media queries規(guī)則來自動(dòng)適應(yīng)不同訪問設(shè)備的屏幕尺寸和顯示要求。而流動(dòng)網(wǎng)格采用頁面元素大小的相對(duì)單位(百分比或EM)，而非傳統(tǒng)設(shè)計(jì)使用的絕對(duì)單位(像素或點(diǎn)數(shù))，以確定頁面各組成元素的大小。最后，圖片大小也是采用相對(duì)單位而靈活縮放，不至于在小屏幕的移動(dòng)設(shè)備上超出顯示區(qū)域。xml：可擴(kuò)展標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言的子集，是一種用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言。
在電子計(jì)算機(jī)中，標(biāo)記指計(jì)算機(jī)所能理解的信息符號(hào)，通過此種標(biāo)記，計(jì)算機(jī)之間可以處理包含各種的信息比如文章等。它可以用來標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對(duì)自己的標(biāo)記語言進(jìn)行定義的源語言。 它非常適合萬維網(wǎng)傳輸，提供統(tǒng)一的方法來描述和交換獨(dú)立于應(yīng)用程序或供應(yīng)商的結(jié)構(gòu)化數(shù)據(jù)。是Internet環(huán)境中跨平臺(tái)的、依賴于內(nèi)容的技術(shù)，也是當(dāng)今處理分布式結(jié)構(gòu)信息的有效工具。早在1998年，W3C就發(fā)布了XML1.0規(guī)范，使用它來簡(jiǎn)化Internet的文檔信息傳輸。DOM:文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語言的標(biāo)準(zhǔn)編程接口。在網(wǎng)頁上，組織頁面（或文檔）的對(duì)象被組織在一個(gè)樹形結(jié)構(gòu)中，用來表示文檔中對(duì)象的標(biāo)準(zhǔn)模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網(wǎng)頁使用非微軟平臺(tái)及瀏覽器無法正常顯示。
ECMAScript:ECMAScript是一種由Ecma國際（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì),英文名稱是European Computer Manufacturers Association）通過ECMA-262標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語言。這種語言在萬維網(wǎng)上應(yīng)用廣泛，它往往被稱為JavaScript或JScript，所以它可以理解為是javascript的一個(gè)標(biāo)準(zhǔn),但實(shí)際上后兩者是ECMA-262標(biāo)準(zhǔn)的實(shí)現(xiàn)和擴(kuò)展。
javascript:JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。
JScript:JScript是由微軟公司開發(fā)的活動(dòng)腳本語言，是微軟對(duì)ECMAScript規(guī)范的實(shí)現(xiàn)。JScript最初是隨Internet Explorer 3.0于1996年8月發(fā)布。在網(wǎng)絡(luò)程序員談?wù)揑nternet Explorer中的JavaScript的時(shí)候，他們實(shí)際上是指JScript。和其他活動(dòng)腳本一樣，它后來也被Windows Script Host（WSH）和Active Server Pages所支持。典型的JScript源文件使用的擴(kuò)展名是.js。JScript最新的版本是基于尚未定稿的ECMAScript4.0版規(guī)范的JScript .NET，并且可以在微軟的.Net環(huán)境下編譯。JScript在ECMA的規(guī)范上增加了許多特性。
前端（FRONT END）：前端對(duì)于網(wǎng)站來說，通常是指，網(wǎng)站的前臺(tái)部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級(jí)版本HTML5、CSS3，以及SVG等。
后端：后端是提供服務(wù)數(shù)據(jù)接口的，前端通過調(diào)用后端返回的數(shù)據(jù)接口重組渲染頁面，即直接為瀏覽器端提供服務(wù)的服務(wù)器端。
為什么需要“響應(yīng)式網(wǎng)頁設(shè)計(jì)”
- 由于目前世界上人們?cè)L問網(wǎng)頁的設(shè)備大致可分為桌面電腦、平板電腦、智能手機(jī)這三種（如圖一）。這三種設(shè)備的排版方式、采用的網(wǎng)絡(luò)協(xié)議、以及設(shè)備本身的硬件都是不一樣的，我們?cè)谠O(shè)計(jì)與制作網(wǎng)頁的時(shí)候就需要考慮到兼容性的問題，我們構(gòu)建的網(wǎng)絡(luò)應(yīng)可以自動(dòng)適應(yīng)不同的訪問設(shè)備。
- 每個(gè)訪問設(shè)備硬件不同，尤其是屏幕的分辨率，我們?cè)谠O(shè)計(jì)與制作網(wǎng)頁時(shí)需要考慮到每個(gè)設(shè)備的分辨率的問題，方便用戶閱讀和導(dǎo)航瀏覽，減少用戶的放大/縮小/滑動(dòng)操作，從而提供完整而友好的用戶體驗(yàn)。（如圖二中，各種訪問網(wǎng)絡(luò)的設(shè)備分辨率參數(shù)眾多）
- 擁有更多的手機(jī)、平板和電腦用戶
響應(yīng)式網(wǎng)站的興起是平板電腦和手機(jī)有大量普及以及互聯(lián)網(wǎng)使用不斷增加的必然結(jié)果。響應(yīng)式網(wǎng)站的最大優(yōu)勢(shì)在于能兼容各種設(shè)備，而非使用傳統(tǒng)方式將用戶跳轉(zhuǎn)至設(shè)備專用網(wǎng)站。 - 提高轉(zhuǎn)換率和銷量
響應(yīng)式設(shè)計(jì)網(wǎng)站還有效地解決一些在傳統(tǒng)網(wǎng)站上無法解決，困擾用戶許久的問題，如性能差、功能少以及感受和外觀不一致。響應(yīng)式網(wǎng)站意味著無需在網(wǎng)站設(shè)置跳轉(zhuǎn)，從而極大完善了用戶體驗(yàn)，這也是響應(yīng)式網(wǎng)站的最大優(yōu)勢(shì)所在。另外，使用集成式設(shè)計(jì)和 CSS 表單一類的功能使網(wǎng)站無論在何種設(shè)備上都能營(yíng)造出風(fēng)格一致的感覺和外觀，用戶可以在任何設(shè)備上輕松瀏覽網(wǎng)站，進(jìn)而提高轉(zhuǎn)換率。 - 提升搜索排名
在搜索引擎中排名靠前是每個(gè)網(wǎng)站的終極目標(biāo)，具有響應(yīng)式設(shè)計(jì)布局的網(wǎng)站有助于達(dá)成這個(gè)目標(biāo)。首先，維護(hù)此類網(wǎng)站所需的時(shí)間縮短，只需要一組超鏈接來優(yōu)化該網(wǎng)站在搜索引擎中的排名
其次，有更多時(shí)間擬定全面的搜索引擎優(yōu)化策略，響應(yīng)式網(wǎng)站可以讓我們集中精力維護(hù)管理一個(gè)兼容所有設(shè)備的網(wǎng)站，從而節(jié)省大量的時(shí)間投入。 - 節(jié)省企業(yè)的建站及運(yùn)營(yíng)成本
H5響應(yīng)式網(wǎng)站，只需要開發(fā)一次，從成本層面來說，為企業(yè)節(jié)省了時(shí)間、精力和金錢，響應(yīng)式網(wǎng)站能為企業(yè)節(jié)省30%的成本。從營(yíng)銷層面來看，H5響應(yīng)式網(wǎng)站在不同的終端設(shè)備上都使用同一個(gè)網(wǎng)址，只需要對(duì)唯一站點(diǎn)進(jìn)行運(yùn)營(yíng)推廣，后臺(tái)管理，數(shù)據(jù)分析都是用同一個(gè)平臺(tái)，利于維護(hù)，大大減少了運(yùn)營(yíng)成本。 - 總結(jié):以上6個(gè)原因和兩張圖表，都反映了，為了好的用戶體驗(yàn)，“響應(yīng)式網(wǎng)頁設(shè)計(jì)”是必不可少的。
響應(yīng)式網(wǎng)頁設(shè)計(jì)例子
- 應(yīng)用響應(yīng)式網(wǎng)頁設(shè)計(jì)
https://www.apple.com/cn/
APPLE.png - 無應(yīng)用響應(yīng)式網(wǎng)頁設(shè)計(jì)
http://www.sohu.com/a/200534168_99919559
搜狐.png
響應(yīng)式網(wǎng)頁技術(shù)三種關(guān)鍵技術(shù)
響應(yīng)式設(shè)計(jì)整合了媒體查詢、彈性視覺媒體和流動(dòng)布局，媒體查詢實(shí)現(xiàn)按設(shè)備特性來分級(jí)控制頁面布局，彈性視覺媒體實(shí)現(xiàn)視覺媒體按照特定布局的動(dòng)態(tài)調(diào)整，使用流動(dòng)布局能創(chuàng)建可縮放、可流動(dòng)的彈性版式，三者構(gòu)成了響應(yīng)式設(shè)計(jì)的核心技術(shù)。
在CSS2.1媒體類型允許為顯示器（screen）、打印機(jī)（print）、電視機(jī)（tv）等媒體定義樣式，W3C在CSS3中加入了媒體查詢（Media Queries）模塊，不但支持定義媒體類型，而且支持上網(wǎng)設(shè)備的物理特性的檢測(cè)。沒有CSS3的媒體查詢模塊，就不能針對(duì)設(shè)備特性匹配特定的CSS樣式。媒體查詢根據(jù)媒體類型、屏幕寬度、屏幕比例、設(shè)備方向（橫向或縱向）等各種功能特性來改變頁面布局，而不僅僅像CSS2.1的只是媒體類型。Web設(shè)計(jì)者只需要針對(duì)不同的屏幕分辨率等級(jí)來編寫不同的頁面布局樣式，然后上網(wǎng)設(shè)備會(huì)根據(jù)自身的屏幕分辨率來選擇一種適合頁面的布局，從而改善用戶瀏覽體驗(yàn)。媒體查詢表達(dá)式由設(shè)備類型和一個(gè)或多個(gè)檢測(cè)媒體特性的聲明構(gòu)成，聲明由媒體特性名稱和值構(gòu)成，中間用冒號(hào)“：”分隔[8]。媒體查詢的語法為：“@media 媒體類型 and （媒體特性） {樣式代碼}”，其中媒體類型常用的有all（所有設(shè)備）、screen（電腦顯示器）、print（打印機(jī)或者打印預(yù)覽）和tv（電視機(jī)）。CSS3中定義的媒體特性共有13種，分別是視口寬度width、視口高度height、設(shè)備屏幕分辨率寬度device-width、設(shè)備屏幕分辨率高度device-height、設(shè)備方向orientation[portrait | landscape]、視口寬高比aspect-ration、設(shè)備屏幕分辨率寬高比device-aspect-ratio、設(shè)備支持的每像素色彩位數(shù)color、設(shè)備的顏色索引表中的顏色數(shù)color-index、黑白屏幕設(shè)備每個(gè)像素的所使用的位數(shù)monochrome 、屏幕或打印機(jī)分辨率的resolution、電視機(jī)掃描方式scan[progressive | interlace]、輸出設(shè)備是柵格還是位圖grid[0|1]。可使用and關(guān)鍵詞組合媒體類型和媒體特性值條件，在媒體類型前面或媒體特性前面加not對(duì)后面的表達(dá)式取反，加逗號(hào)“，”在一系列表達(dá)式其中一個(gè)真時(shí)則為真，加only使不支持媒體查詢的瀏覽器忽略本條查詢，“{ }”中書寫CSS規(guī)則。例如 “@media screen and （min-width： 480px） {}”表示視口寬度小于480px適用，“@media screen and （min -width： 480px） and （max -width： 768px） {}”表示視口寬度大于480px但小于768px適用，“@media screen and （max-width： 960px） {}”表示視口寬度小于960px適用，“@media screen and （min-width： 1420px） {}”表示視口寬度大于1420px適用，這時(shí)可能要考慮設(shè)置max-width屬性限制內(nèi)容區(qū)的最大寬度，或者增加列數(shù)來填補(bǔ)大量的空白區(qū)域[9][10]。響應(yīng)式Web設(shè)計(jì)最為常見的是檢測(cè)上網(wǎng)設(shè)備的width特性值，設(shè)定視口寬度的級(jí)數(shù)取決于用戶群體終端設(shè)備碎片化程度和視覺設(shè)計(jì)需求，需為不同終端級(jí)別寬度定制相匹配的樣式，做到寬度連續(xù)覆蓋。另一種設(shè)計(jì)思路強(qiáng)調(diào)以界面為主導(dǎo)，解除斷點(diǎn)設(shè)置跟上網(wǎng)設(shè)備分辨率的直接關(guān)聯(lián)，斷點(diǎn)數(shù)量及參數(shù)完全根據(jù)內(nèi)容來決定，也就是根據(jù)網(wǎng)站的圖文版式的變動(dòng)臨界點(diǎn)來設(shè)置。 響應(yīng)式Web布局設(shè)計(jì)時(shí)，媒體查詢順序采用從移動(dòng)端向上設(shè)計(jì)，優(yōu)先建立移動(dòng)設(shè)備用戶體驗(yàn)，然后針對(duì)更大屏幕的顯示器進(jìn)行調(diào)整，以避免移動(dòng)終端對(duì)媒體查詢的支持不完善，也就是，在樣式表的開頭定義基本樣式，然后使用媒體查詢從低分辨率到高分辨率來重寫樣式以覆蓋前面定義的樣式[11]。
為減少HTTP請(qǐng)求數(shù)量，建議將媒體查詢樣式盡可能寫在同一個(gè)文件中。對(duì)于較復(fù)雜的網(wǎng)站，可以采用外部樣式表，通過標(biāo)簽鏈接到網(wǎng)頁文件，如“”，實(shí)現(xiàn)當(dāng)視口寬度大于等于960px時(shí)載入外部樣式表gt-960px.css。
目前，移動(dòng)終端瀏覽器一般都能比較好支持CSS3，不需要考慮響應(yīng)式布局的媒體查詢兼容問題，為實(shí)現(xiàn)IE9以下的瀏覽器媒體查詢兼容性，需在頁面中插入css3-mediaqueries.js文件調(diào)用，代碼如下：
<！—[if lt IE 9]>
<！[endif]—>媒體查詢能適應(yīng)不同設(shè)備和視口寬度，可以從一組CSS樣式代碼切換到另一組，但切換期間沒有任何平滑過渡，會(huì)導(dǎo)致媒體內(nèi)容要么過寬出現(xiàn)水平滾動(dòng)條，要么過窄出現(xiàn)大量空白，尤其在切換臨界點(diǎn)時(shí)布局會(huì)嚴(yán)重惡化。通過將固定像素布局轉(zhuǎn)換成靈活的流動(dòng)布局，確保在媒體查詢未切換樣式期間布局能適應(yīng)視口改變。流動(dòng)布局依靠浮動(dòng)和百分比寬度來實(shí)現(xiàn)，浮動(dòng)實(shí)現(xiàn)布局區(qū)塊的動(dòng)態(tài)重組，百分比寬度實(shí)現(xiàn)未到達(dá)斷點(diǎn)時(shí)的區(qū)塊寬度調(diào)整，以減少創(chuàng)建的斷點(diǎn)數(shù)。浮動(dòng)布局在固定寬度的Web設(shè)計(jì)中已經(jīng)大量使用，在此不在贅述。將固定像素寬度轉(zhuǎn)換成百分比寬度可套用公式：百分比寬度=目標(biāo)元素寬度÷上下文元素寬度。例如，將原來#wrapper寬度為960px，#content寬度為940px，轉(zhuǎn)換為百分比布局#content寬度97.92%，即940÷960=0.9792。
在網(wǎng)頁文檔標(biāo)簽中插入一個(gè)HTM5標(biāo)簽，設(shè)置基于WebKit內(nèi)核的畫布縮放參數(shù)，如 ，可實(shí)現(xiàn)頁面在瀏覽器中以原始大小顯示，禁止用戶縮放。其中：width和height檢測(cè)設(shè)備屏幕分辨率寬度和高度，initial-scale 設(shè)定初始的縮放比例，值為1時(shí)將根據(jù)瀏覽器可視區(qū)域?qū)嶋H大小來渲染頁面。minimum-scale和maximum-scale指允許用戶縮放到的最小比例和最大比例，user-scalable設(shè)定用戶是否禁止縮放。視覺媒體主要指文本、圖形、圖像、動(dòng)畫和視頻等可視媒體。彈性視覺媒體設(shè)計(jì)的本質(zhì)是確保視覺媒體適應(yīng)版式布局的變化，確保頁面上媒體的可讀性。響應(yīng)式Web設(shè)計(jì)時(shí)文本和其他視覺媒體實(shí)現(xiàn)方式不同。
彈性文本需將文本大小單位從px改為em， em的大小由上下文的定義的字體大小計(jì)算而來，是相對(duì)大小單位。使用em的好處在于：允許縮放文本和保持文本大小設(shè)計(jì)的靈活性。設(shè)計(jì)時(shí)通常給body標(biāo)簽設(shè)置font-size屬性值后，給其他文本都使用相對(duì)單位em，使用相對(duì)單位的文本就會(huì)基于body的大小來計(jì)算字體大小。字體百分比尺寸計(jì)算跟百分比布局盒子計(jì)算方法相同，如上下文字體大小為16像素，當(dāng)前文字大小為14像素，則字體大小0.875em，即14÷16=0.875。
圖形圖像、動(dòng)畫和視頻的彈性設(shè)置使用“img，object，video，embed {width：100%； max-width：100%；}”，max-width屬性用于設(shè)置媒體顯示閾值，確?？s放時(shí)不會(huì)超出圖片最大尺寸，同時(shí)應(yīng)刪除HTML插入媒體的標(biāo)記中的width和height屬性定義，如果要定義特定規(guī)格的媒體尺寸，可編寫專用樣式單獨(dú)設(shè)置寬度，以覆蓋上下文定義，使其僅作用于該媒體即可。另外一種限制內(nèi)部媒體顯示縮放比例的方法是給外層盒子設(shè)置max-width屬性，通過限制外層盒子來間接控制內(nèi)部媒體縮放尺寸。
在設(shè)計(jì)制作彈性視覺媒體時(shí)，僅考慮媒體放大到的極限情況會(huì)因此帶來一個(gè)媒體文件整體偏大，使網(wǎng)站變得臃腫，需利用媒體壓縮和優(yōu)化技術(shù)來控制文件大小。另一種實(shí)現(xiàn)思路是通過JavaScript判斷當(dāng)前設(shè)備的分辨率，并根據(jù)預(yù)設(shè)的規(guī)則加載不同尺寸的圖片文件。
