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