如何做響應(yīng)式布局？HTML5框架如何搭建？HTML5手機(jī)端網(wǎng)站代碼自適應(yīng)的寫(xiě)法很多只懂前端HTML的朋友都不知道，設(shè)計(jì)出網(wǎng)頁(yè)的時(shí)候只能PC端訪問(wèn)，手機(jī)端訪問(wèn)會(huì)出問(wèn)題；而且最近公司可能會(huì)有相關(guān)反向的知識(shí)擴(kuò)展，下面桂林SEO結(jié)合網(wǎng)上的知識(shí)給大家分享下響應(yīng)式布局的代碼和寫(xiě)法要點(diǎn)：
一、響應(yīng)式布局框架軟件和學(xué)習(xí)點(diǎn)
現(xiàn)在常用的開(kāi)發(fā)框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile當(dāng)然可能還有一些移動(dòng)端開(kāi)發(fā)的框架，這些我就沒(méi)具體去研究過(guò)。
1、HTML5學(xué)習(xí)的知識(shí)反向
HTML5學(xué)習(xí)前，必須要學(xué)HTML，然后的話需要學(xué)習(xí)js，是學(xué)原生JS，而不是學(xué)Jquery，jQuery很多事封裝了的。
2、為什么說(shuō)BootStrap是目前前端最火熱的開(kāi)發(fā)框架呢？
因?yàn)閎ootstrap自帶響應(yīng)式布局（柵格系統(tǒng)），而且能做到移動(dòng)設(shè)備優(yōu)先的原則。
3、運(yùn)用bootstrap來(lái)開(kāi)發(fā)網(wǎng)站有什么好處呢？
（1）不懂設(shè)計(jì)也可以做網(wǎng)站
就算不懂設(shè)計(jì)，你的網(wǎng)頁(yè)在Bootstrap的幫助下，也能擁有超高顏值。它強(qiáng)大的內(nèi)置樣式庫(kù)讓你的作品快速完成。
主要體現(xiàn)在：字體文件和bootstrap自帶的UI樣式。（為廣大不會(huì)UI設(shè)計(jì)的程序員很有幫助）
4、bootstrap的優(yōu)缺點(diǎn)
相信任何框架都有它的優(yōu)點(diǎn)，同時(shí)也是有它的缺點(diǎn)的。沒(méi)有一個(gè)產(chǎn)品是很完美的，直接點(diǎn)說(shuō)：
就是CSS和JS有點(diǎn)點(diǎn)大。CSS壓縮后115k,JS壓縮后35k；如果你想要使用Bootstrap的所有功能，你應(yīng)該好好考慮資源的加載時(shí)間。
二、自適應(yīng)手機(jī)端網(wǎng)站代碼和HTML代碼的頭部的區(qū)別
一般我們自己手動(dòng)開(kāi)發(fā)手機(jī)網(wǎng)站的話，基本可以劃分兩類來(lái)做到。一類是通過(guò)在網(wǎng)頁(yè)頭部添加meta標(biāo)簽進(jìn)行實(shí)現(xiàn)（網(wǎng)頁(yè)指html5的格式來(lái)開(kāi)發(fā)）。另一類是通過(guò)CSS3的Media標(biāo)簽（媒介查詢）來(lái)實(shí)現(xiàn)。不了解媒介查詢的朋友，可以看看這篇文章：怎么進(jìn)行響應(yīng)式布局，HTML5框架的搭建，在這里重慶SEO詳細(xì)講解下,利用添加meta標(biāo)簽來(lái)做手機(jī)網(wǎng)站。
基本在網(wǎng)頁(yè)頭部我們只需添加四個(gè)meta標(biāo)簽就可以實(shí)現(xiàn)一個(gè)手機(jī)網(wǎng)站的框架。我一起來(lái)看看是哪些meta標(biāo)簽。
（1）響應(yīng)式布局頭部mate要加的代碼——添加viewport標(biāo)簽
Markup
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
代碼解釋
Markup
width----viewport的寬度（width=device-width意思是：寬度等于設(shè)備寬度）
（2）、禁止將數(shù)字變?yōu)殡娫捥?hào)碼
一般情況下，IOS和Android系統(tǒng)都會(huì)默認(rèn)某長(zhǎng)度內(nèi)的數(shù)字為電話號(hào)碼，即使不加也是會(huì)默認(rèn)顯示為電話的，所有加上下面的就不會(huì)自動(dòng)變了
Markup
<metaname="format-detection"content="telephone=no"/>
（3）蘋果的ios平臺(tái)的手機(jī)——iphone設(shè)備中的safari私有meta標(biāo)簽
它指定的iphone中safari頂端的狀態(tài)條的樣式，默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）；另外還有一個(gè)個(gè)性化的link標(biāo)簽，它支持用戶將網(wǎng)頁(yè)創(chuàng)建快捷方式到桌面時(shí)，其圖標(biāo)變?yōu)槲覀冏约憾x的圖標(biāo)。
Markup
<metaname="apple-mobile-web-app-capable"content="yes"/><metaname="apple-mobile-web-app-status-bar-style"content="black">
（4）移動(dòng)端手機(jī)網(wǎng)站自適應(yīng)框架HTML5代碼
特殊說(shuō)明：手機(jī)端字體適應(yīng)大多用的px，但是目前來(lái)說(shuō)，就移動(dòng)端的淘寶采用rem來(lái)作為單位來(lái)布局的也有，具體字體問(wèn)題自己網(wǎng)上搜下。
Markup
<!doctypehtml><html><head>
（4）關(guān)于移動(dòng)端HTML5網(wǎng)站響應(yīng)式布局效果查看問(wèn)題
有兩種方式：其一用真機(jī)測(cè)試，這個(gè)如果是做開(kāi)發(fā)的話必須得；其二；在瀏覽器上測(cè)試，可以chrome（谷歌瀏覽器）的F12調(diào)試工具：有個(gè)手機(jī)樣的小圖標(biāo)，點(diǎn)擊就能模擬手機(jī)測(cè)試。
特殊說(shuō)明：圖標(biāo)特殊代碼說(shuō)明
要求文件名應(yīng)為 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS會(huì)為這個(gè)圖標(biāo)自動(dòng)添加圓角、陰影和高亮覆蓋層，后者則不會(huì)添加這些效果，代碼如下：
Markup
<linkrel="apple-touch-icon-precomposed"href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">
