整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html5自適應網站的基本含義

          html5自適應網站的基本含義

          球是巨大的,不同地區的距離是遙遠的。但是在今天,通過人類的先進技術水平,這些問題都已經不是問題。互聯網的技術把地球變得更小,人們形象的稱呼用互聯網聯系的地球為“地球村”。這就是互聯網的神奇作用。而要很好的使用好互聯網這個資源,就應該進行網站建設。而網站中的HTML5網站建設又是未來應該熟練掌握的一項技術。說到底,html5自適應網站到底是什么呢?這篇文章小編為您詳細解說。

          自適應網站

          發展歷程

          標準通用標記語言下的一個應用HTML標準自1999年12月發布的HTML4.01后,后繼的HTML5和其它標準被束之高閣,為了推動Web標準化運動的發展,一些公司聯合起來,成立了一個叫做 Web Hypertext Application Technology Working Group (Web超文本應用技術工作組 -WHATWG) 的組織。WHATWG 致力于 Web 表單和應用程序,而W3C(World Wide Web Consortium,萬維網聯盟) 專注于XHTML2.0。在 2006 年,雙方決定進行合作,來創建一個新版本的 HTML。

          設計目的

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

          未來趨勢

          1、移動優先

          從如今層出不窮的移動應用就知道,在這個智能手機和將平板電腦大爆炸的時代,移動優先已成趨勢,不管是開發什么,都以移動為主。

          2、游戲開發者領銜“主演”

          許多游戲開發商都被Facebook或者Zynga推動著發展,而未來的Facebook應用生態系統是基于HTML5的,盡管在HTML 5平臺開發出游戲非常困難,但游戲開發商卻都愿意那么做。通過PhoneGap及appmobi的XDK將Web應用游戲打包整合到原生應用中也是一種方式,Facebook差不多就這么干的——基于Web應用及瀏覽器,但卻將之打包整合進原生應用。

          這是一項具有挑戰性的工作,要想做好這類網站建設,要求技術人員具備非常扎實的專業技能,相信只要做好準備,完成一項良好的HTML5網站建設不是難事。而且幫助網站在競爭中取得優勢,擁有常規網站建設沒有的吸引點。

          易點科技(www.eidea.net.cn)成立于2009年,一直專注于IT顧問咨詢、信息平臺系統開發、企業網絡方案解決與運營。服務內容包含pc+手機響應網站建設、B2C購物商城定制開發、微信公眾號定制開發、企業管理小型系統定制開發。

          、 利用meta標簽

          Meta標簽主要用來描述一個HTML網頁文檔的屬性,如作者、日期時間、網頁描述、關鍵詞、頁面刷新等,它的Description和Keywords屬性,可加入網站的關鍵字,讓網頁利于搜索引擎。

          <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

          解釋:Viewport指用戶網頁的可視區域,content中的“width”指的是虛擬窗口寬度,上面代碼意為虛擬窗口/頁面寬度初始比例為1,最小比例為1,最大比例為1,用戶不可擴展,頁面不可縮放。

          以上標簽只支持一種尺寸,正確的做法是用js動態生成下面標簽,前提是要先獲取屏幕尺寸。

          <script type="text/javascript">

          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中的百分比中指的是相對于父元素的寬度。子元素的padding-left:50%,父元素的寬度是百,子元素的margin-top:20%,那么父元素的高是百。body默認寬度是屏幕寬度(PC中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就可以了。但這只適合布局簡單的頁面,復雜的頁面實現很困難。

          3、 使用CSS3單位rem

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

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

          所以會在頭部加上這個JS代碼:

          <script type="text/javascript">

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

          var rem=html.offsetWidth / 6.4;

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

          </script>

          4、 媒體查詢

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

          以上幾種方法,僅供大家參考。如有不妥,歡迎指正。制作自適應頁面需要比較好的編程基礎和技術覺悟,一般的小白,不建議大家為了做自適應網頁專門學習HTML5、CSS3和JS,畢竟這并非一朝一夕就能學會的。如果技術小白想做自適應網頁,這里給大家提供一種思路,用建站寶盒。完全不需要編程基礎,全程拖拽,一樣能做出讓人驚艷的自適應網站。現在還有免費建站活動,無論外行內行,大家可以注冊體驗一下。

          零基礎免費做HTML5自適應網站:http://www.iisp.com/design/free-site.php?s=yuqiuping

          據日常開發經驗及網上相關資料,用簡單通俗易懂的大白話分析自適應響應式的區別。注:本文只分析自適應跟響應式的區別以及了解其由來的背景,不在于討論其使用的方法

          一、什么是自適應布局

          自適應布局就是寬度自適應布局,在不同大小的設備上,網頁以等比例的形式縮放寬度,呈現同樣的主體內容和排版布局

          自適應布局演示圖


          隨著屏幕寬度縮放,網頁內容也以等比例縮放,不管屏幕寬度為多少,網頁主體排版布局總是一樣的

          二、什么是響應式布局

          響應式布局就是根據屏幕大小變化,頁面的內容排版布局會自動調整變動,已呈現更好的用戶體驗

          響應式布局演示圖


          隨著屏幕寬度的縮放,頁面做出相應調整,布局和展示的內容會有所變動

          1.自適應布局出現的背景

          在PC時代初期,網頁設計者都會設計固定寬度的頁面,最開始的電腦顯示器分辨率種類不多,因為當時電腦本來就少。后來隨著顯示器種類越來越多,以及筆記本、平板電腦的普及,這種固定寬度的頁面出現了問題。于是出現了一種新的布局方式,寬度自適應布局。我們平時談論的自適應布局,大多指的就是寬度自適應布局

          再到后來,互聯網大戰從PC打到了手機,還有 HTML5 標準的發布。自適應布局也從PC延伸到手機,自適應布局也因此火了起來,成為網頁設計的必要需求

          2.響應式布局出現的背景

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


          主站蜘蛛池模板: 亚洲电影唐人社一区二区| 风间由美在线亚洲一区| 精品无码一区二区三区爱欲九九 | 欲色aV无码一区二区人妻| 国产精品 视频一区 二区三区 | 性色AV 一区二区三区| 免费日本一区二区| 美女免费视频一区二区| 亚洲视频一区调教| 日韩福利视频一区| 91精品福利一区二区| 国产一区二区三区不卡AV| 国产SUV精品一区二区88L| 亚洲一区二区电影| 午夜福利av无码一区二区| 立川理惠在线播放一区| 日韩在线一区高清在线| 中文字幕AV一区二区三区人妻少妇| 国产韩国精品一区二区三区| 呦系列视频一区二区三区| 麻豆一区二区免费播放网站| 精品一区二区三区在线视频| 波多野结衣免费一区视频| 日本大香伊一区二区三区| 国内精品无码一区二区三区| 国产情侣一区二区三区| 国产精华液一区二区区别大吗| 无码av人妻一区二区三区四区| 中文字幕无线码一区2020青青| 亚洲爆乳无码一区二区三区| 日韩精品无码一区二区三区| 人妻少妇精品视频三区二区一区| 亚洲AV无码一区二三区| 偷拍激情视频一区二区三区| 亚洲AV日韩AV天堂一区二区三区| 日韩免费视频一区| 国产高清视频一区二区| 亚洲国产美国国产综合一区二区| 日本免费一区二区三区最新| 亚洲中文字幕一区精品自拍| 日韩免费观看一区|