200

自適應網站制作教程

時間: 2016-12-29 11:29:55   點擊數: 42431   來源: 耐思智慧

      想必很多人都跟小編一樣,第一次聽到自適應網站這個詞的時候,都感覺很陌生,不了解是什么,是一個什么類型的網站。那什么是自適應網站呢?前幾年Ethan Marcotte提出了“自適應網頁設計”這個名詞,指的是可以自動識別屏幕寬度,做出相應調整的網頁設計。其實簡單來講,自適應網站就是能夠適應不同分辨率屏幕的網站,一站通行,不需要再為每一個不同屏幕大小的設備重新制作一個網站版本。那自適應網站該如何制作呢?自適應網站與響應式網站的區(qū)別是什么?

 

自適應網站


一、允許網頁寬度自動調整

首先,在網頁代碼的頭部,加入一行viewport元標簽。

 

<meta name="viewport" content="width=device-width, initial-scale=1" />

 

viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等于屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。所有主流瀏覽器都支持這個設置,包括IE9。對于那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

 

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

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

 

<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.$1);

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>

 

二、CSS文件尾部增加針對不同屏幕分辨率的規(guī)則。

 

例如使用如下的代碼,可以讓屏幕寬度低于480像素的設備(如iPhone等),網頁側欄隱藏中部內容欄寬度自動調節(jié)。CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left:50%,父元素的寬度是百,子元素的margin-top:20%,那么父元素的高是百。body默認寬度是屏幕寬度(PC中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就可以了。但這只適合布局簡單的頁面,復雜的頁面實現很困難。

@media screen and (max-device-width: 480px) {

  #divMain{

  float: none;

  width:auto;

  }

  #divSidebar {

  display:none;

  }

}

 

三、相對字體大小

字體也不能使用絕對大小(px),而只能使用相對大小(em)。

 

body {

font: normal 100% Helvetica, Arial, sans-serif;

}

 

上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。

 

h1 {

font-size: 1.5em;

}

 

然后,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。

 

small {

font-size: 0.875em;

}

 

small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)。

 

四、流動布局(fluid grid)

"流動布局"的含義是,各個區(qū)塊的位置都是浮動的,不是固定不變的。

 

.main {

float: right;

width: 70%;

}

 

.leftBar {

float: left;

width: 25%;

}

 

float的好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。

 

另外,絕對定位(position: absolute)的使用,也要非常小心。

 

五、圖片的自適應

除了布局和文本,"自適應網頁設計"還必須實現圖片的自動縮放。這只要一行CSS代碼:

 

img { max-width: 100%;}

 

這行代碼對于大多數嵌入網頁的視頻也有效,所以可以寫成:

 

img, object { max-width: 100%;}

 

老版本的IE不支持max-width,所以只好寫成:

 

img { width: 100%; }

 

此外,windows平臺縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令:

 

img { -ms-interpolation-mode: bicubic; }

 

或者,Ethan Marcotte的imgSizer.js。

 

addLoadEvent(function() {

 

var imgs = document.getElementById("content").getElementsByTagName("img");

 

imgSizer.collate(imgs);

 

});

 

建站寶盒


根據以上的步驟,可以簡單的制作出一個自適應網站。但是對于完全不懂編程代碼的你,可以借助建站寶盒自助建站系統(tǒng)來進行自適應網站的制作。自適應網站是未來互聯網時代的主流形式網站。提高用戶瀏覽體驗度,方便網站建設過程。


免費注冊體驗建站寶盒:http://mrpavah.com/user/register.php?s=hyc

上一篇:全網分銷和微分銷的區(qū)別是什么 下一篇:最后2天,建站寶盒買2年送2年優(yōu)惠即將結束!

旗下網站:耐思智慧 - 淘域網 - 我的400電話 - 中文域名:耐思尼克.cn 耐思尼克.top

耐思智慧 © 版權所有 Copyright © 2000-2024 IISP.COM,Inc. All rights reserved

備案號碼: 粵ICP備09063828號  公安備案號: 公安備案 粵公網安備 44049002000123號  域名注冊服務機構許可:粵D3.1-20240003 CN域名代理自深圳萬維網

聲明:本網站中所使用到的其他各種版權內容,包括但不限于文章、圖片、視頻、音頻、字體等內容版權歸原作者所有,如權利所有人發(fā)現,請及時告知,以便我們刪除版權內容

本站程序界面、源代碼受相關法律保護, 未經授權, 嚴禁使用; 耐思智慧 © 為我公司注冊商標, 未經授權, 嚴禁使用

法律顧問:珠海知名律師 廣東篤行律師事務所 夏天風 律師