第一章 網(wǎng)頁自適應
1.1自適應的概念基于PHP技術的多客戶端自適應網(wǎng)站的設計與實現(xiàn)
十幾年前，著名的外國Ethan Marcotte教授提出了自己對網(wǎng)頁方面的一個論點就是“自適應網(wǎng)頁設計”（Responsive Web Design）這個專有名詞，可以在設計網(wǎng)頁的時候讓網(wǎng)頁在設備顯示的時候，自動識別屏幕的寬度、而且做出調整相應網(wǎng)頁的設計。 他本人做出了一個非常有意思實驗，就是把幾張主人公的頭像都進而制作設計成網(wǎng)頁中，當這些頭像圖片并排在一行時，說明屏幕的寬度大于1300像素。當這些頭像圖片分成兩行時，說明屏幕的寬度在600像素到1300像素之間。當導航欄有些偏移到網(wǎng)頁的頂部時，說明屏幕寬度在400像素到600像素之間。當這些頭像圖片分成三行，說明屏幕的寬度在400像素以下。
1.2自適應的發(fā)展方向與應用
現(xiàn)在為什么需要自適應網(wǎng)頁設計？因為“科技時代已經(jīng)來臨，一步一步的向前發(fā)展，不斷的有各種各樣的新型設備（手機/平板電腦/手環(huán)）、平臺和瀏覽器都需要各種網(wǎng)站的網(wǎng)頁能夠兼容顯示。自適應網(wǎng)頁設計決定了一種必然的設計趨勢，在現(xiàn)如今年所有的網(wǎng)站都將采用自適應網(wǎng)頁設計。那么是誰在使用自適應網(wǎng)頁設計呢？其實不管是用在演示、還是流行設計和頁面美化中。而今大量的網(wǎng)站已經(jīng)采用了自適應網(wǎng)頁設計。何時需要采用自適應網(wǎng)頁設計？當你需要考慮以下事情時：在時間上，金錢上，不同瀏覽器的支持，性能，內(nèi)容的呈現(xiàn)，網(wǎng)站等等去跟移動應用相對比時，自然而然就需要采用自適應網(wǎng)頁的設計。
現(xiàn)在的互聯(lián)網(wǎng)已經(jīng)發(fā)展到了移動網(wǎng)絡5G的時代，我們接觸互聯(lián)網(wǎng)的方式已經(jīng)開始呈現(xiàn)出多元化方向發(fā)展，屏幕大小的展示有很大的不確定因素，假設現(xiàn)在的個人和企業(yè)等方面的網(wǎng)站要求每個顯示屏幕都去制作設計一個網(wǎng)站，很明顯就會會加大設計和管理網(wǎng)站的成本，同時還會涉及到未來的運營方面的不便和耗費大量的人力財力的成本來支撐其運營。自適應網(wǎng)站的設計的出現(xiàn)使的設計師在設計一個網(wǎng)站的時候，可以方便快捷的市網(wǎng)頁適應不同的終端系統(tǒng)，應用到不同的網(wǎng)絡載體上去，它具有非常好的的便捷性，同時也有利于減少企業(yè)設計開發(fā)網(wǎng)站的成本等。
老式的網(wǎng)站是固定的死網(wǎng)頁的寬度或者高度，在不同的客戶端所展現(xiàn)的頁面效果都是一樣的。所謂自適應網(wǎng)站設計是指在網(wǎng)頁前端展示的內(nèi)容是活的，即筆記本電腦、臺式電腦、移動設備等不同的設備所看到的內(nèi)容是不一樣的，有了這種技術，網(wǎng)頁就可以適應任何終端，在任何終端都能展示出最好的效果。對目前的自適應網(wǎng)頁設計的發(fā)展趨勢來講，無論是放在市場的角度，還是建設網(wǎng)站的角度，自適應網(wǎng)頁將會取代傳統(tǒng)建設網(wǎng)站的地位?；ヂ?lián)網(wǎng)日新月異，隨著更多的互聯(lián)網(wǎng)技術的誕生，會有更強大的技術出現(xiàn)。
1.3自適應與響應式區(qū)別
在我學習并設計制作自適應網(wǎng)頁的同時，響應式這個名詞會時不時出現(xiàn)在我的視線中那么自適應與響應式是不是一回事呢？沒有做過前端開發(fā)的人自然對這兩個名詞的概念是不清楚不明白的，隨著現(xiàn)在網(wǎng)站設計扁平化的潮流，越來越多的客戶想要把原有的網(wǎng)站做成自適應或者響應式呈現(xiàn)。但很多人又不清楚這兩者的區(qū)別，甚至很多人會認為這兩者就是一個概念。其實響應式布局大概的意思就是一個網(wǎng)頁放在不同適配分辨率下的呈現(xiàn)，這一概念在2010年5月由Ethan Marcotte提出的，簡單來說就是建立一個網(wǎng)頁，通過CSSMedia Queries，Content－Based Breakpoint（基于內(nèi)容的斷點）等技術來改變網(wǎng)頁的大小以適應不同分辨率的屏幕。而自適應布局大概的意思就是依據(jù)不同適配分辨率而選擇不同的頁面，為不同類別的設備建立不同的網(wǎng)頁，檢測到設備分辨率大小后調用相應的網(wǎng)頁。目前AWD網(wǎng)頁主要針對以下幾種分辨率（320，480，760，960，1200，1600）。制作和設計網(wǎng)站的時候，我們需要根據(jù)需求來判斷什么樣的網(wǎng)站適合使用自適應布局（固定斷點），什么樣的網(wǎng)站適合響應式布局（流體網(wǎng)格）。
理論上來說，響應式布局在任何情況下都比自適應布局好一些，但在某些情況下自適應布局更切合實際。自適應網(wǎng)頁設計的優(yōu)勢就是適合固定斷點的網(wǎng)站。在網(wǎng)頁的實施上面代價成本更低，測試也比較容易。自適應布局可以讓設計更加容易操作控制，因為它只需要考慮幾種狀態(tài)就行了。相反另一種對于響應式網(wǎng)頁設計優(yōu)勢就是流體網(wǎng)格的網(wǎng)站。在網(wǎng)頁上表現(xiàn)出靈活性強，可適應不同分辨率的設備，方便快捷的解決多設備顯示適應的問題。下面客觀的來說自適應和響應式的區(qū)別：首先前者和后者解決的問題是不一樣的。自適應本身是去解決怎樣才能在不同大小的移動設備或者其他設備上表現(xiàn)出相同的網(wǎng)頁，寬度一般在600像素以下和在1000像素以上的時候，前者說明是手機小屏幕后者則是pc端。相同的內(nèi)容，在大小不一的屏幕上，都表現(xiàn)出理想滿意的效果，不是一件易事。各式各樣的設計方式都能體現(xiàn)出自己的優(yōu)缺勢，所以每位設計師都會去選擇最適合自己的制作方式。
第二章 Bootstrap全局CSS樣式
2.1概覽
為了網(wǎng)頁自適應的開發(fā)變得更好、更快、更強壯的體驗，學習了Bootstrap后深入了解其中的底層結構關鍵部分，在Bootstrap中用到的一些 HTML 元素與CSS 屬性都會是 HTML5 文檔類型。在編寫時可以參照以下代碼進一步設置。第1行<!DOCTYPE html>，第2行<html>，第3行…，第4行</html>。
在原來Bootstrap 2所屬的框架中，它的重要組織部分對移動設備友好的樣式增加了一些。在現(xiàn)在的Bootstrap 3 版本又中重新設計編寫了整個框架，那是因為把移動設備的優(yōu)先級提升了。這個版本在編寫時能直接進入框架的中心，在操作上而且方便快捷的增加了對移動設備的樣式多樣性。在框架的每個角落中包括了設備的樣式，它不僅僅是增加額外的文件。設計者在移動設備上進行繪制和觸屏縮放時，需要在<head>之中間加入viewport元數(shù)據(jù)標簽，編寫代碼如下：<meta name=”viewport“ content=”width=device-width, initial-scale=1“>。瀏覽器在設備上使用時，使用視口（viewport）去設置 meta 屬性 user-scalable=no，用來對其禁止縮放，禁止縮放后，使用者只可以滾動屏幕。以上方法不適合全部的網(wǎng)站應用，還是需要看設計者的情況而定！此代碼：<meta name=”viewport“ content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no“>可以參考。
Bootstrap鏈接樣式、排版設置了基本的全局樣式。前者是為所有的鏈接設置了基本顏色 @link-color ，正是當鏈接處于：hover狀態(tài)時才可以添加下劃線。后者是為body元素設置background-color: #fff;設計師會用@line-height-base、@font-size-base和@font-family-base當變量作為排版的基本要求參數(shù)。Bootstrap 會為每一個頁面的內(nèi)容和柵格系統(tǒng)包裹。container 容器。。container 是用于固定寬度和支持響應式布局的容器。代碼如下：第1行<div>，第2行…，第3行</div>。其中。container-fluid 類用在100%寬度，占所有視口的容器。
2.2柵格系統(tǒng)
Bootstrap 是已響應式和供移動設備的流式柵格系統(tǒng)，它共有12列不超過12列，它會跟隨視口或屏幕大小而增加。這里包含了方便使用的預定義類和強大的mixin來編寫更具語義的布局。柵格系統(tǒng)的原理是通過一系列的行（row）與列（column）的相結合去搭建頁面的布局，本身的設計內(nèi)容就可以放入這些搭建好的布局中。Bootstrap 柵格系統(tǒng)中的”row“一定被 .container或 .container-fluid包含，簡單方便的賦予合適的排列和內(nèi)補。在以”行（row）“在水平方向組建一組”列（column）“。”列“作為”行“的直接子元素時，搭建設計的內(nèi)容需要放在”列“的里面。在 .row 和 .col-xs-4 這種預定義的類，也能用來創(chuàng)建柵格布局。Bootstrap 源代碼中定義的 mixin 也能用來創(chuàng)建布局，在使用”列“去設置 padding 屬性，從而搭建列與列之間的間隔。通過 .row 元素定為負值 margin 用來抵消掉 .container 元素設置的 padding，它的功能就是側面的把”行“所包含的”列“消除掉了padding。柵格系統(tǒng)大多用在等于分界點大小或者大于屏幕所在寬度的設備上，對小屏幕設備覆蓋柵格類。在任何元素上的所有 .col-md-* 柵格類都用在與屏幕寬度大于或等于分界點大小的設備上，對小屏幕設備覆蓋柵格類。在元素上所有的。col-lg-*不存在的應用都會影響大尺寸屏幕的移動設備或這其他設備。
2.3排版
在HTML文檔中有六個級別的標題，分別是<h1>到<h6>元素來定義。其中<h1>表示最高級別的標題，然后依次類減，<h6>級別最低。<h1>是一級標題，表示的是最大的字號，<h6>是6級標題，表示的是最小的字號。在html文檔中的標題里可以包含 <small> 標簽，可賦予 .small 類的元素，可用來標記副標題。<h1>h1. Bootstrap heading <small> Secondary text</small></h1>。整個文檔頁面的主體中Bootstrap 把全局 font-size 設置為14px，line-height 設置為 1.4左右。以上屬性可直接賦予 <body> 元素和全部段落元素。其次<p>（段落）元素設置了等于 1/2 行高（即 10px）的底部外邊距。中心內(nèi)容可以通過 .lead 類的添加讓段落能明顯突出，要刪除的文本使用 <del> 標簽。沒用的文本使用 <s> 標簽。另外插入的文本使用 <ins> 標簽。帶下劃線的文本使用 <u> 標簽。
通過使用對齊類文本，可以將文字重新對齊，非常的簡單方便。
<p>Left aligned text.</p>
<p>Center aligned text.</p>
<p>Right aligned text.</p>
<p>Justified text.</p>
<p>No wrap text.</p>
可以改變文本的大小寫的代碼如下：
<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>Capitalized text.</p>
通過最接近日常使用的格式呈現(xiàn)讓聯(lián)系信息如下。在每行結尾添加 <br> 可以保留需要的樣式。
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title=”Phone“>P:</abbr> （123） 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href=”mailto:#“>first.last@example.com</a>
</address>
排列順序無關緊要的一列元素
<ul>
<li>…</li>
</ul>
順序至關重要的一組元素
<ol>
<li>…</li>
</ol>
2.4響應式工具
為了方便更高性能的開展在移動設備網(wǎng)頁頁面開發(fā)工作上，可以用媒體查詢功能，讓這些工具類的功能準確無誤的針對不同設備去隱藏或者展示網(wǎng)頁頁面的內(nèi)容。為了充分考慮，其中包含對打印機顯示或隱藏內(nèi)容的工具類。擁有了這些針對性的使用這類工具類，可以避免因為同一個網(wǎng)站創(chuàng)建完全不同的版本。反之，通過使用這些工具類可以在不同設備上提供不同的展現(xiàn)形式。
可用的類可以通過單獨或聯(lián)合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內(nèi)容。
打印類和常規(guī)的響應式類一樣，使用下面的類可以針對打印機隱藏或顯示某些內(nèi)容。
測試用例可以在移動設備或者其他設備中調試瀏覽器的大小，當打開頁面，在大屏幕，中等屏幕和大屏幕，小屏幕和大屏幕，超小屏幕和大屏幕上瀏覽器視口（viewport）中是可見的。在大屏幕上，medium和large，小屏幕和大屏幕，超小屏幕和大屏幕瀏覽器視口（viewport）中是隱藏的，如圖2-2所示。
第三章 PHP和HTML5
3.1 PHP基本概念
HypertextPreprocessor縮寫為PHP，php是一中內(nèi)嵌在HTML的腳本語言。PHP本身不一樣的語法包含了c,java和perl及PHP式的最新語法。它的用處就是讓網(wǎng)頁設計開發(fā)程序員能比現(xiàn)在更加快的寫出網(wǎng)頁。模式pattern，是用來解決某一種或者某一類問題的方法?？蚣躥ramework，它是某些應用的半成品，也可以說是一組組件，讓設計師自主的去選擇自己想完成的系統(tǒng)。指的是使用別人搭好的舞臺進行表演?？蚣芑径际浅尚偷模诓粩嗟纳?。PHP模板來自Perl的Template，模板這種東西能體現(xiàn)出非常方便快捷的把網(wǎng)站的結構改善，能很快的改變使用者的整個站點的外形；抽象程序的設計，無垃圾HTML代碼； 設計編寫人員不用關心全部的”模糊“代碼；，它運行的速度非常的快。
有一種保存到外部的一個引用資源，它是通過專門的函數(shù)用來建立的一種特殊變量。類是包含類本身的方法、名稱、屬性與事件，同樣也是包含有關對象動作方式的信息和某個對象的定義，其實它的本身不是對象，因為它不存在內(nèi)存中。如果設計師引用類的代碼運行的時候，類的一個新的例子，就是對象，在內(nèi)存中創(chuàng)建了，只有一個類，但能從類在內(nèi)存中知道創(chuàng)建的多少，得知有多少個相同類型的對象。函數(shù)作為一種潮流程序，它為設計人員提供了便捷，在進行一個復雜的程序設計時，它可以根據(jù)網(wǎng)頁制作所需要完成的功能，把程序分為某些相對獨立的部分，每一個部分編寫一個函數(shù)，從而使各部分充分獨立，任務簡單，程序明了，能讀懂還方便維護。有一種對象方法，它是把面向對象的思想應用于軟件開發(fā)的過程的一種對象方法。指導開發(fā)活動系統(tǒng)的方法是搭建在”對象“概念基礎上的方法學。
3.2 HTML5基本概念
Hyper Text Markup Language是HTML的英文名字全稱，作為一種網(wǎng)頁超文本標記語言，html是不能直接顯示在瀏覽器中。標記語言通過瀏覽器的解釋和編譯，就可以正確地反映出HTML標記語言的內(nèi)容。它在廣域網(wǎng)上的領域是空前的，它就是網(wǎng)頁內(nèi)容和外觀的標準語言。HTML是網(wǎng)頁內(nèi)容的一個載體，它用在網(wǎng)頁和手機端的編程語言上較多。
<head>表示內(nèi)容的最開始信息，一般包括標題和主題信息。head標簽用在定義文檔內(nèi)容的頂部，它是所有頂部元素的容器。頂部元素有<title>、<script>、<style>、<link>、<meta>等標簽，在head部分的內(nèi)容是不能直接在網(wǎng)頁中顯示出來的。<title>作為網(wǎng)頁標題內(nèi)容，每個網(wǎng)頁都是會有一個獨一無二的title，<meta>是定義頁面信息的說明或者關鍵字等。<meta>標簽沒有結束標記，因為在尖括號內(nèi)就是meta內(nèi)容。在html頁面中有很多meta元素。meta元素的屬性中有name和http-equiv兩者，其中name用于描述網(wǎng)頁多一些，它便于搜索引擎查找、分類。在<meta name=”keywords“ content=”輸入具體的關鍵字“>這段代碼中，name為屬性名稱，keywords是屬性，也是設置網(wǎng)頁的關鍵字屬性，在content中則定義具體的關鍵字。在<meta name=”description“ content=”設置頁面說明“>這段代碼中，name為屬性名稱，description是屬性，它將元信息屬性設置為頁面說明，在content中定義具體的描述語言。定義編輯工具：<meta name=”generator“ content=”編輯設計的名稱“>。設置作者信息：<meta name=”author“ content=”設計者的姓名“>。設置網(wǎng)頁的語言和文字：<meta http-equiv=”content-type“ content=”text/html“; charset=”字符集類型“>。http-equiv用于傳送http通信協(xié)議的標頭，而在content中才是具體的屬性值。charset用于設置網(wǎng)頁的內(nèi)碼語系，也就是字符集的類型。
<body>表示文檔的主體區(qū)域，網(wǎng)頁的主體部分包括要在瀏覽器顯示處理的所有信息和在網(wǎng)頁的主體標記中有很多的屬性設置，還有網(wǎng)頁的背景設置、文字屬性設置和鏈接設置等。在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標簽。設置網(wǎng)頁背景色：<body blue=”背景顏色“> 。設置網(wǎng)頁背景圖片：<body background=”圖片的地址“> 。background屬性可以將圖片設置為背景，還可以設置背景圖片的平鋪方式、顯示方式等。圖片的地址可以是相對地址，也可以是絕對地址。設置文字的顏色：<body text=”文字的顏色“>。在沒有對文字的顏色進行單獨定義時，這一屬性可以對頁面中所有的文字起作用。text值可以是一個已命名的顏色，也可以是一個十六進制的顏色值，如”blue“或者”#FF99FF“。設置修改鏈接文字的顏色：<body link=”顏色“>。在默認情況下，瀏覽器以藍色作為超鏈接文字的顏色。link屬性的設置與前面幾個設置顏色的參數(shù)類似，都是與body標簽放置在一起，表明它對網(wǎng)頁中所有未單獨設置的元素起作用。<body link=”顏色“ alink=”顏色“>使用alink可以設置正在訪問的文字顏色，單擊鏈接的文字時，文字已經(jīng)改變了顏色。<body link=”顏色“ alink=”顏色“ vlink=”顏色“>使用vlink可以設置訪問后的鏈接文字的顏色，單擊鏈接的文字后，文字變成vlink設置的顏色值。設置邊距值：<body topmargin=”100“ leftmargin=”100“>。margin用于設置邊距值，默認情況下，邊距的值以像素為單位。topmargin和leftmargin分別設置上邊距和左邊距。
3.3 PHP和HTML5區(qū)別
PHP以服務端開發(fā)為主，H5是前端開發(fā)。服務端主要與服務器（CPU、內(nèi)存、磁盤、網(wǎng)絡）和數(shù)據(jù)庫打交道，性能是重點。服務端一般不直接與用戶打交道，而是與更接近用戶的應用及前端交換數(shù)據(jù)。前端主要與人打交道，重點是開發(fā)出用戶體驗良好的應用和網(wǎng)站。打個比方，如果說服務端開發(fā)像農(nóng)業(yè)和重工業(yè)，那前端就是服務業(yè)和輕工業(yè)。再比如服務端是農(nóng)民種糧食蔬菜，關注的是水肥、陽光、溫度，最終是追求每季產(chǎn)量高低。前端是廚師、面點師，關注的是味道、色彩、外觀，最終是追求好吃又好看。服務端隱藏在背后不為人知，前端應用直接服務于人，人人皆知。服務端與前端有重疊，服務端開發(fā)不只是PHP一家，JavaWeb、。NET、Node.js等也占有一定比例。服務端開發(fā)比前端開發(fā)更有技術水平，最終的薪資水平也遠遠高于前端開發(fā)。
這里，順便要科普一下，行內(nèi)所說的H5不只是HTML、CSS，而是以JS為主的前端和Web App開發(fā)最新技術的統(tǒng)稱。一個很鮮活的例子，以qq空間為例（大家都很熟悉），大家想要發(fā)表篇日志，首先要在后臺頁面上進行圖文編輯，而PHP就是這份日志的收納箱，它里邊有很多編寫好的代碼（這就是PHP開發(fā)師做的工作），而當我們點擊發(fā)布時，這份代碼就在拼命運行，最終剛寫好的日志就呈現(xiàn)在首頁里了，也就是H5編輯好的頁面上。H5只會做好qq空間的頁面框架，比如日志、圖片、動態(tài)等固定的大框架，而PHP則負責你需要更改的數(shù)據(jù)，如上傳圖片，更新日志、動態(tài)等這些動作
第四章 網(wǎng)頁自適應布局與實現(xiàn)
4.1 自適應輪番圖的原理和實現(xiàn)
當屏幕寬度大于等于768px時，圖片使用大圖，輪播圖里的div高度固定，寬度為窗口的寬度（隨窗口寬度的變化而變化），當屏幕寬度小于768px（手機）時，將圖片換為小圖，并在div里生成img標簽，img的寬高隨窗口變化而變化，包裹img的div也隨之變化，html代碼如下：
<section id=”main_ad“ class=”carousel slide“ data-ride=”carousel“>
<!-- 活動指示器 -->
<ol>
<li data-target=”#main_ad“ data-slide-to=”0“></li>
<li data-target=”#main_ad“ data-slide-to=”1“></li>
<li data-target=”#main_ad“ data-slide-to=”2“></li>
<li data-target=”#main_ad“ data-slide-to=”3“></li>
</ol>
<!-- 輪播項 -->
<div role=”listbox“>
<div class=”item active“ data-image-lg=”img/slide_01_2000x410.jpg“ data-image-xs=”img/slide_01_640x340.jpg“></div>
<div data-image-lg=”img/slide_02_2000x410.jpg“ data-image-xs=”img/slide_02_640x340.jpg“></div>
<div data-image-lg=”img/slide_03_2000x410.jpg“ data-image-xs=”img/slide_03_640x340.jpg“></div>
<div data-image-lg=”img/slide_04_2000x410.jpg“ data-image-xs=”img/slide_04_640x340.jpg“></div>
</div>
<!-- 控制按鈕 -->
<a class=”left carousel-control“ href=”#main_ad“ role=”button“ data-slide=”prev“>
<span class=”glyphicon glyphicon-chevron-left“ aria-hidden=”true“></span>
<span>Previous</span>
</a>
<a class=”right carousel-control“ href=”#main_ad“ role=”button“ data-slide=”next“>
<span class=”glyphicon glyphicon-chevron-right“ aria-hidden=”true“></span>
<span>Next</span>
</a>
</section> CSS代碼如下：
#main_ad .carousel-inner .item{
background-size: cover; /*讓圖片全部顯示出來div*/
background-position: center,center; /*讓圖片在div里水平垂直居中*/
background-repeat: no-repeat;
height: 410px;
}
@media （max-width:768px） {
#main_ad .carousel-inner .item {
height: auto;
}
#main_ad .carousel-inner .item img{
width: 100%;
}}
js代碼如下：
$（function（） {
/**
* 根據(jù)屏幕寬度的變化決定輪播圖片應該展示什么 5 */
function resize（） {
// 獲取屏幕寬度
var windowWidth = $（window）。width（）；
// 判斷屏幕是大還是小
var isSmallScreen = windowWidth < 768;
// 根據(jù)大小為界面上的每一張輪播圖設置背景
$（‘#main_ad > .carousel-inner > .item’）。each（function（i, item） {
var $item = $（item）；
// var imgSrc = $item.data（isSmallScreen ? 'image-xs' : 'image-lg‘）；
var imgSrc =
isSmallScreen ? $item.data（'image-xs’） : $item.data（‘image-lg’）；
// 設置背景圖片
$item.css（‘backgroundImage', 'url（”' + imgSrc + ’“）‘）；
//
// 因為我們需要小圖時 尺寸等比例變化，所以小圖時我們使用img方式
if （isSmallScreen） {
$item.html（'<img src=”' + imgSrc + ’“ alt=”“ />‘）；
} else {
$item.empty（）；
}
}）；
}
// // 讓window對象立即觸發(fā)一下resize，初始化div的背景圖
// $（window）。trigger（'resize’）；
$（window）。on（‘resize', resize）。trigger（'resize’）；
}）；
4.2 柵格式布局實現(xiàn)
Container：顧名思義container是柵格系統(tǒng)最外層的class，直接被container包裹的只能是row這個class。需要注意的是container自帶左右各15px padding值，這樣container與瀏覽器窗口之間就存在一定距離，也可以給一個div設置兩個col- class，用來適應不同的屏幕。值得一提的是，row的前后是負的15px margin值，用處是row的 div 被約束在 container內(nèi)邊界區(qū)域重疊不超過它。一定不能在container外用row，因為這樣是無效的。col在不同屏幕下行為不同，列（col）現(xiàn)在有15px的padding了，如下圖中黃顏色部分。Container的正padding值造成了15px的留空，row用負margin值反的延伸回去，所以現(xiàn)在col的padding值與container的padding重疊，永遠不要在row外使用col,在row外使用col是無效的。row：row指container的一行，每行理想狀態(tài)包含12個col，這些col在不同屏幕大小時行為不同。
4.3 移動端響應式布局
REM的定義：rem是相對于根元素<html>來設置字體大小的，簡單來說就是只需要在根元素確定一個值，這個值作為參考，然后在根元素中設置什么大小的字體，這完全可以根據(jù)使用者的需求。像素PX是一種單位，但不容易編寫響應式布局，EM：以父節(jié)點font-size大小為參考點，標準不統(tǒng)一。在使用REM中html里默認的 font-size:16px; 也就是 1rem = 16px，以設計寬度為750px為例，那么定義 font-size:50px; 那么 1rem = 50px，比例為：750/50=15。屏幕寬度為750px，則html設置的font-size為：750/15 = 50，設計稿中dom（20px）的尺寸為：20px/50=0.4rem，1rem = 50px，屏幕寬度為320px，則html設置的font-size為：320/15 = 21.33，設計稿中dom（20px）的尺寸依然為：20px/50=0.4rem，1rem = 320/750*50px。CSS固定樣式：以下代碼包含了移動端設備絕大多數(shù)屏幕尺寸。
html{font-size:50px;}
body{font-size:24px;}
@media screen and （min-width:320px）{
html{font-size:21.333333333333332px;}
body{font-size:12px;}
}
@media screen and （min-width:360px）{
html{font-size:24px;}
body{font-size:12px;}
}
@media screen and （min-width:375px）{
html{font-size:25px;}
body{font-size:12px;}
}
@media screen and （min-width:384px）{
html{font-size:25.6px;}
body{font-size:14px;}
}
@media screen and （min-width:400px）{
html{font-size:26.666666666666668px;}
body{font-size:14px;}
}
@media screen and （min-width:414px）{
html{font-size:27.6px;}
body{font-size:14px;}
}
@media screen and （min-width:424px）{
html{font-size:28.266666666666667px;}
body{font-size:14px;}
}
@media screen and （min-width:480px）{
html{font-size:32px;}
body{font-size:15.36px;}
}
@media screen and （min-width:540px）{
html{font-size:36px;}
body{font-size:17.28px;}
}
@media screen and （min-width:720px）{
html{font-size:48px;}
body{font-size:23.04px;}
}
@media screen and （min-width:750px）{
html{font-size:50px;}
body{font-size:24px;}
}
第五章 研究方向和展望
5.1 移動互聯(lián)APP開發(fā)
PHP不適合開發(fā)客戶端，因為PHP是服務端腳本語言，負責 B/S或C/S 架構的S部分，即：Server端的開發(fā)。API（Application Programming Interface，應用程序接口）架構，已經(jīng)成為目前互聯(lián)網(wǎng)產(chǎn)品開發(fā)中常見的軟件架構模式，并且誕生很多專門API服務的公司，如：聚合數(shù)據(jù)。一般的PHP框架都可以用來做app后臺服務器。因為原理上客戶端從你這邊拿的都是字符串數(shù)據(jù)，所以就算你不用框架也沒有問題，不過會引發(fā)后續(xù)的問題。PHP提供API給客戶端就好了，API描述方式有很多種：REST、SOAP等等均可。因為PHP是腳本語言，主要用于服務端的開發(fā)，是負責完成 B/S架構 或 C/S架構 的S部分，但是PHP可不僅僅只能在互聯(lián)網(wǎng)站上發(fā)展，一個PHP for Android（PFA）站點表示他們將可以發(fā)布編程模型、工具盒文檔讓PHP在Android上實現(xiàn)應用。利用PHP框架語言開發(fā)手機APP和WEB開發(fā)一樣，首先需要一些相關的參數(shù)，這些參數(shù)，都會由客戶端傳過來，也許是 GET 也許是 POST，這個需要開發(fā)團隊相互之間約定好，或者制定統(tǒng)一規(guī)范。其次有了參數(shù)，根據(jù)應用需求，完成數(shù)據(jù)處理，例如：任務進度更新、APP內(nèi)購、一局游戲結束數(shù)據(jù)提交等等。再次數(shù)據(jù)邏輯處理完之后，返回客戶端所需要用到的相關數(shù)據(jù)，例如：任務狀態(tài)、內(nèi)購結果、玩家信息等等。例如數(shù)據(jù)怎么返給客戶端？直接輸出的形式，如：JSON、XML、TEXT 等等。然后客戶端獲取到你返回的數(shù)據(jù)后，在客戶端本地和用戶進行交互。
php不能編寫 app應用程序，主要用于B/S結構（Browser/Server，瀏覽器/服務器模式）開發(fā)使用。但是php可以作為服務器與app應用交換數(shù)據(jù)服務端API.
學習APP現(xiàn)在流行的有三種手機平臺，android、IOS，windows。他們都各有各自的編程語言，具體可以在百度搜索下各自平臺制作學習。移動后臺都是 PHP、Python，Java都重，更別說C++了。用協(xié)議http ,tcp/ip。nodejs 可以把路由，form表單驗證 寫成c++的模塊， 主要是提供接口給移動端APP調用，可以從成本、服務器資源的占用、開發(fā)效率、運行效率，后臺復雜邏輯處理的能力等。利用PHP框架開發(fā)手機APP需要考慮兩種可能：一個是如果需要即時通訊，也就是需要手機客戶端與服務端保持TCP長連接，服務端需要向客戶端推送數(shù)據(jù)的時候可以隨時通過這個長連接發(fā)送數(shù)據(jù)給客戶端，這樣便能做到客戶端與服務端及時通訊甚至客戶端與客戶端及時通訊。做到這需要PHP能維持很多客戶端連接，并且需要多進程支持，支持自己的通訊協(xié)議。這樣的應用傳統(tǒng)的nginx+php-fpm + 傳統(tǒng)的php框架是做不到的。如果是長連接即時通訊類的服務器框架推薦一看下workerman，它是就是一個php的socket服務器框架，非常適合做手機后臺服務器框架。另一個是如果不需要即時通訊的話，可以考慮直接走http協(xié)議，用nginx+php-fpm搭建一個webserver就好了，php框架可以采用thinkphp、yii等等，客戶端需要與服務器通訊的時候向服務端get/post一個請求就好。如果是比較簡單的手機APP，例如新聞客戶端這樣的不會涉及到長連接的服務，那么可以考慮直接使用http協(xié)議。因為該協(xié)議幾乎被所有可以上網(wǎng)的設備支持，手機客戶端那邊也有大量相關的庫可以調用，省掉不少麻煩，其實確定了這三個：協(xié)議（HTTP）、數(shù)據(jù)表示方法（JSON）、請求數(shù)據(jù)的方法（REST）之后，基本上就可以開發(fā)一個簡單地服務端接口了（業(yè)務邏輯得自己琢磨），再加上手機客戶端那邊配套的設置搭起來，那么就可以了。
5.2目前Wex5、phonegap的應用對APP開發(fā)的沖擊
目前面臨著技術方案選型，框架選擇wex5還是phoneGap哪個更好，兩者區(qū)別是wex5：源于國內(nèi)自主研發(fā)起步公司的軟件，主要進行app，微信端的開發(fā)，目前而言針對android和ios的比較多，是基于HTML5、CSS3的開發(fā)，是通過圖形化界面調用組件設計UI，后臺用requireJS來進行代碼編寫，適用范圍中等水平，是一款快速開發(fā)工具。而phoneGap:源于國外Adobe公司，主要進行移動端開發(fā)，目前針對蘋果的iOS，谷歌的Android，RIM的Blackberry，惠普的WebOS，微軟的Windows Phone，塞班公司的Symbian以及三星的bada等，基于HTML5，CSS3和JavaScript的開發(fā)，適用范圍較廣，是一款快速開發(fā)平臺。前者wex5：知名度不高，主要因為是國人自己研發(fā)的，很多東西不太到位，bug相對較多，書籍幾乎沒有，除了官網(wǎng)的視頻及Pdf文檔外，幾乎沒有其他書籍。而phoneGap:有書，有視頻，通過搜索即可找到相關資料。但在開發(fā)過程中有限制，如果是為BlackBerry、webOS、Windows Phone 7、Symbian或Bada設備做開發(fā)，則有些功能就不支持（例如，在Windows Phone 7上，就不支持攝像頭、羅盤或存儲功能。老版的BlackBerry型號支持地理定位、通知以及網(wǎng)絡的可達性）。后者相對比較實用，適合用戶量大的。
5.3跨平臺網(wǎng)站、系統(tǒng)應用
跨平臺泛指程序語言、軟件或硬件設備可以在多種作業(yè)系統(tǒng)或不同硬件架構的電腦上運作。廣義而言，一般的計算語言都可做到跨平臺，開發(fā)商只需要提供各種平臺下的Runtime/中間件環(huán)境即可。嚴格而言是指用某種計算機語言編制的程序只需要做小量的修改，編譯之后即可在另外一種平臺下運行，此時并不提供Runtime/中間件環(huán)境。例如Java是一種提供Runtime環(huán)境的跨平臺解決方案，而C是一種標準且嚴格的跨平臺語言。
php開發(fā)的程序可以不經(jīng)修改運行在，windows.linux,unix等多個操作系統(tǒng)上，
補充：舉例說windows系統(tǒng)的軟件不可以在linux上運行，linux系統(tǒng)的軟件不可以在windows上運行。但是php的解釋器有多個操作系統(tǒng)的多個版本，多的偶都叫不出來名字，凡是有解釋器的操作系統(tǒng)你寫的php程序就可以運行，不論你是在windows還是linux下寫的。目前市面上主流的跨平臺應用程序和UI開發(fā)框架：QT是諾基亞的開源跨平臺開發(fā)工具。主要用于嵌入式開發(fā)，MeeGo平板和MeeGo手機開發(fā)。MicroGUI是國人自行研發(fā)的跨WinCE、Windows Mobile、MTK、QT、Symbian、iPhone、Android、Brew MP等多款平臺的UI開發(fā)框架。該產(chǎn)品正在產(chǎn)品研發(fā)階段。預計年底前會上市。MiniGUI也是一款國產(chǎn)的GUI系統(tǒng)，主要用于低端嵌入式領域開發(fā)。移動領域的開發(fā)，目前面臨不同操作系統(tǒng)需不同開發(fā)語言，同一操作系統(tǒng)存在不同版本，同一版本存在不同機型等難題，給移動開發(fā)增加了很大難度。
在移動開發(fā)領域，跨平臺開發(fā)技術成為很多企業(yè)和開發(fā)者的首選，可以有效解決不同操作系統(tǒng)不同機型終端的開發(fā)難題，為企業(yè)節(jié)省時間成本和人員成本。目前國內(nèi)外知名的跨平臺開發(fā)技術有：PhoneGap（美國）、Titanium（美國）、SenCha（美國）、AppCan（中國）。AppCan是國內(nèi)首個基于HTML5技術的跨平臺移動應用開發(fā)平臺，實現(xiàn)一次開發(fā)、多平臺適配，支持iOS、Android、Symbian、Windows Phone四大智能平臺，可以有效降低開發(fā)門檻，減少開發(fā)周期。愛碼哥作為第三代移動中間件采用（xml和JavaScript）的開發(fā)方式并內(nèi)置了開發(fā)框架，可以實現(xiàn)用Javascript、Java、。Net、php或htlm5當中的任何一套開發(fā)語言寫一套代碼就可以生成Android和iOS的兩個系統(tǒng)的原生app可以有效降低開發(fā)門檻，減少開發(fā)周期。
皖公網(wǎng)安備 34010202600669
