html5自適應(yīng)網(wǎng)站的基本含義

球是巨大的，不同地區(qū)的距離是遙遠(yuǎn)的。但是在今天，通過人類的先進(jìn)技術(shù)水平，這些問題都已經(jīng)不是問題。互聯(lián)網(wǎng)的技術(shù)把地球變得更小，人們形象的稱呼用互聯(lián)網(wǎng)聯(lián)系的地球?yàn)椤暗厍虼濉薄＿@就是互聯(lián)網(wǎng)的神奇作用。而要很好的使用好互聯(lián)網(wǎng)這個(gè)資源，就應(yīng)該進(jìn)行網(wǎng)站建設(shè)。而網(wǎng)站中的HTML5網(wǎng)站建設(shè)又是未來應(yīng)該熟練掌握的一項(xiàng)技術(shù)。說到底，html5自適應(yīng)網(wǎng)站到底是什么呢?這篇文章小編為您詳細(xì)解說。

自適應(yīng)網(wǎng)站

發(fā)展歷程

標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group (Web超文本應(yīng)用技術(shù)工作組 -WHATWG) 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序，而W3C(World Wide Web Consortium，萬維網(wǎng)聯(lián)盟) 專注于XHTML2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的 HTML。

設(shè)計(jì)目的

HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式，包括：新的解析規(guī)則增強(qiáng)了靈活性新屬性、淘汰過時(shí)的或冗余的屬性、一個(gè)HTML5文檔到另一個(gè)文檔間的拖放功、離線編輯、信息傳遞的增強(qiáng)、詳細(xì)的解析規(guī)則、多用途互聯(lián)網(wǎng)郵件擴(kuò)展(MIME)和協(xié)議處理程序注冊(cè)、在SQL數(shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)的通用標(biāo)準(zhǔn)(Web SQL)HTML5在2007年被萬維網(wǎng)聯(lián)盟(W3C)新的工作組采用。這個(gè)工作組在2008年1月發(fā)布了HTML 5的首個(gè)公開草案。眼下，HTML5處于“呼吁審查”狀態(tài)，W3C預(yù)期它將在2014年年底達(dá)到其最終狀態(tài)。

未來趨勢(shì)

1、移動(dòng)優(yōu)先

從如今層出不窮的移動(dòng)應(yīng)用就知道，在這個(gè)智能手機(jī)和將平板電腦大爆炸的時(shí)代，移動(dòng)優(yōu)先已成趨勢(shì)，不管是開發(fā)什么，都以移動(dòng)為主。

2、游戲開發(fā)者領(lǐng)銜“主演”

許多游戲開發(fā)商都被Facebook或者Zynga推動(dòng)著發(fā)展，而未來的Facebook應(yīng)用生態(tài)系統(tǒng)是基于HTML5的，盡管在HTML 5平臺(tái)開發(fā)出游戲非常困難，但游戲開發(fā)商卻都愿意那么做。通過PhoneGap及appmobi的XDK將Web應(yīng)用游戲打包整合到原生應(yīng)用中也是一種方式，F(xiàn)acebook差不多就這么干的——基于Web應(yīng)用及瀏覽器，但卻將之打包整合進(jìn)原生應(yīng)用。

這是一項(xiàng)具有挑戰(zhàn)性的工作，要想做好這類網(wǎng)站建設(shè)，要求技術(shù)人員具備非常扎實(shí)的專業(yè)技能，相信只要做好準(zhǔn)備，完成一項(xiàng)良好的HTML5網(wǎng)站建設(shè)不是難事。而且?guī)椭W(wǎng)站在競爭中取得優(yōu)勢(shì)，擁有常規(guī)網(wǎng)站建設(shè)沒有的吸引點(diǎn)。

易點(diǎn)科技（www.eidea.net.cn）成立于2009年，一直專注于IT顧問咨詢、信息平臺(tái)系統(tǒng)開發(fā)、企業(yè)網(wǎng)絡(luò)方案解決與運(yùn)營。服務(wù)內(nèi)容包含pc+手機(jī)響應(yīng)網(wǎng)站建設(shè)、B2C購物商城定制開發(fā)、微信公眾號(hào)定制開發(fā)、企業(yè)管理小型系統(tǒng)定制開發(fā)。

、利用meta標(biāo)簽

Meta標(biāo)簽主要用來描述一個(gè)HTML網(wǎng)頁文檔的屬性，如作者、日期時(shí)間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁利于搜索引擎。

解釋：Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴(kuò)展，頁面不可縮放。

以上標(biāo)簽只支持一種尺寸，正確的做法是用js動(dòng)態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。

var phoneWidth=parseInt(window.screen.width);

var phoneScale=phoneWidth/640;

var ua=navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version=parseFloat(RegExp.);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale=‘+phoneScale+‘, maximum-scale=‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

2、百分比法

CSS中的百分比中指的是相對(duì)于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復(fù)雜的頁面實(shí)現(xiàn)很困難。

3、使用CSS3單位rem

在頁面載入開始時(shí)首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請(qǐng)自行查閱），假設(shè)寬度為W，一個(gè)div在寬度為640px的設(shè)計(jì)稿的下的寬度為dW1，如果html的font-size為100px，那么這個(gè)div的寬度用rem表示是多少呢？

計(jì)算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個(gè)合適的font-size，計(jì)算：100 / 640=fontSize / W, fontSize=W / 640 * 100=W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

所以會(huì)在頭部加上這個(gè)JS代碼：

var html=document.querySelector(‘html‘);

var rem=html.offsetWidth / 6.4;

html.style.fontSize=rem + "px";

</script>

4、媒體查詢

媒體查詢正是為解決網(wǎng)頁適應(yīng)手機(jī)屏幕。媒體查詢的功能就是為不同的“媒體”設(shè)置不同的css樣式，頁面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設(shè)置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應(yīng)頁面需要比較好的編程基礎(chǔ)和技術(shù)覺悟，一般的小白，不建議大家為了做自適應(yīng)網(wǎng)頁專門學(xué)習(xí)HTML5、CSS3和JS，畢竟這并非一朝一夕就能學(xué)會(huì)的。如果技術(shù)小白想做自適應(yīng)網(wǎng)頁，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎(chǔ)，全程拖拽，一樣能做出讓人驚艷的自適應(yīng)網(wǎng)站。現(xiàn)在還有免費(fèi)建站活動(dòng)，無論外行內(nèi)行，大家可以注冊(cè)體驗(yàn)一下。

零基礎(chǔ)免費(fèi)做HTML5自適應(yīng)網(wǎng)站：http://www.iisp.com/design/free-site.php?s=yuqiuping

據(jù)日常開發(fā)經(jīng)驗(yàn)及網(wǎng)上相關(guān)資料，用簡單通俗易懂的大白話分析自適應(yīng)跟響應(yīng)式的區(qū)別。注：本文只分析自適應(yīng)跟響應(yīng)式的區(qū)別以及了解其由來的背景，不在于討論其使用的方法

一、什么是自適應(yīng)布局

自適應(yīng)布局就是寬度自適應(yīng)布局，在不同大小的設(shè)備上，網(wǎng)頁以等比例的形式縮放寬度，呈現(xiàn)同樣的主體內(nèi)容和排版布局

自適應(yīng)布局演示圖

隨著屏幕寬度縮放，網(wǎng)頁內(nèi)容也以等比例縮放，不管屏幕寬度為多少，網(wǎng)頁主體排版布局總是一樣的

二、什么是響應(yīng)式布局

響應(yīng)式布局就是根據(jù)屏幕大小變化，頁面的內(nèi)容排版布局會(huì)自動(dòng)調(diào)整變動(dòng)，已呈現(xiàn)更好的用戶體驗(yàn)

響應(yīng)式布局演示圖

隨著屏幕寬度的縮放，頁面做出相應(yīng)調(diào)整，布局和展示的內(nèi)容會(huì)有所變動(dòng)

1.自適應(yīng)布局出現(xiàn)的背景

在PC時(shí)代初期，網(wǎng)頁設(shè)計(jì)者都會(huì)設(shè)計(jì)固定寬度的頁面，最開始的電腦顯示器分辨率種類不多，因?yàn)楫?dāng)時(shí)電腦本來就少。后來隨著顯示器種類越來越多，以及筆記本、平板電腦的普及，這種固定寬度的頁面出現(xiàn)了問題。于是出現(xiàn)了一種新的布局方式，寬度自適應(yīng)布局。我們平時(shí)談?wù)摰淖赃m應(yīng)布局，大多指的就是寬度自適應(yīng)布局

再到后來，互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機(jī)，還有 HTML5 標(biāo)準(zhǔn)的發(fā)布。自適應(yīng)布局也從PC延伸到手機(jī)，自適應(yīng)布局也因此火了起來，成為網(wǎng)頁設(shè)計(jì)的必要需求

2.響應(yīng)式布局出現(xiàn)的背景

自適應(yīng)雖然成為網(wǎng)頁設(shè)計(jì)的必要需求，但還是暴露出一個(gè)問題，如果屏幕太小，即使網(wǎng)頁內(nèi)容能夠根據(jù)屏幕大小進(jìn)行適配，但是在小屏幕上查看，會(huì)感覺內(nèi)容過于擁擠，降低了用戶體驗(yàn)。此時(shí)，為了解決這個(gè)問題而衍生出來的概念就是響應(yīng)式布局。它可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整。網(wǎng)頁的排版布局和展示的內(nèi)容會(huì)有所變動(dòng)

在線咨詢

上一篇：jsp基礎(chǔ)-flex布局 #jps
下一篇：電腦開啟一個(gè)網(wǎng)頁后,莫名其妙的彈出很多網(wǎng)頁怎么回事？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html5自適應(yīng)網(wǎng)站的基本含義

您的項(xiàng)目需求