整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，我是吉礻羊。
有人@我說不知道怎么寫自適應的網(wǎng)頁，今天就先不寫優(yōu)化的了，我把寫自適應網(wǎng)頁的方法說下。
自適應的網(wǎng)頁
工具：dw網(wǎng)頁設(shè)計軟件；ps圖像處理軟件。
方法/步驟：
1，在<head></head>之間加入加入一行viewport標簽。
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。
由于大家使用的電腦分辨率不一樣，大小也不一樣，所以網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素，對圖像來說也是這樣。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
2，字體也不能使用絕對大小（px），而只能使用相對大小（em）。
例如：
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代碼指定，字體大小是頁面默認大小的100%，即14像素。
3，"自適應網(wǎng)頁"的實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0" />
<title></title>
<style>
body {
height: 800px;
}
.header {
width: 100%;
height: 15%;
background-color: aquamarine;
}
.leftside {
width: 20%;
height: 75%;
background-color: skyblue;
float: left;
}
.main {
float: right;
width: 80%;
height: 75%;
background-color: steelblue;
}
.footer {
clear: both;
width: 100%;
height: 10%;
background-color: darkgray;
}
</style>
</head>
<body >
<div class="header"></div>
<div class="leftside"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
如今人們經(jīng)過手機閱讀網(wǎng)頁占了大多數(shù)，隨著閱讀方式的改動，網(wǎng)頁完成多終端自適應，無論關(guān)于防止工程師無謂的反復勞動或者是項目管理的便利性上來說重要性都是非常巨大的。
由于挪動設(shè)備越來越多的被人們運用，手機成為訪問互聯(lián)網(wǎng)的最常見終端，而我們設(shè)計的網(wǎng)頁確是為了呈如今PC端。
手機的屏幕比擬小，寬度通常在600像素以下，而PC的屏幕寬度，普通都在1000像素以上（目前主流寬度是1366×768），有的還到達了2000像素。同樣的內(nèi)容，要在大小懸殊的屏幕上，都呈現(xiàn)出稱心的效果，并不是一件容易的事。
很多網(wǎng)站的處理辦法，是為不同的設(shè)備提供不同的網(wǎng)頁，比方特地提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比擬費事，同時要維護好幾個版本，而且假如一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設(shè)計的復雜度。
自適應是為了解決如何在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁。
如何進行自適應網(wǎng)頁設(shè)計
通俗的講，移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認情況下，一般來講，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設(shè)備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計的網(wǎng)站移動設(shè)備上的瀏覽器都會把自己默認的viewport設(shè)為980px或1024px（也可能是其它值，這個是由設(shè)備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認的viewport的寬度要小的。
該meta標簽的作用是讓當前viewport的寬度等于設(shè)備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個應該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現(xiàn)橫向滾動條。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
把移動設(shè)備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動設(shè)備的viewport，ideal viewport的寬度等于移動設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對ideal viewport 而設(shè)計的網(wǎng)站，不需要用戶手動縮放，也不需要出現(xiàn)橫向滾動條，都可以完美的呈現(xiàn)給用戶。
要得到ideal viewport就必須把默認的layout viewport的寬度設(shè)為移動設(shè)備的屏幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個特殊的值就行了。
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設(shè)備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設(shè)備上，必須弄明白這點。在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。
流動布局（fluid grid） "流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。
"自適應網(wǎng)頁設(shè)計"的核心，就是CSS3引入的MediaQuery模塊。 它的意思就是，自動探測屏幕寬度，然后加載相應的CSS文件。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載a.css文件。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"
如果屏幕寬度在400像素到600像素之間，則加載b.css文件。
自適應與響應式的區(qū)別
自適應是為了解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁，讓同一張網(wǎng)頁自動適應不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整網(wǎng)頁內(nèi)容大小。但是無論怎樣，他們主體的內(nèi)容和布局是沒有變的。
自適應還是暴露出一個問題，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進行適配，但是會感覺在小屏幕上查看，內(nèi)容過于擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應調(diào)整的網(wǎng)頁設(shè)計，布局和展示的內(nèi)容可能會有所變動。
響應式布局被大家熟知的一個重要原因就是 twitter 開源了 bootstrap。
相比自適應網(wǎng)站，響應式網(wǎng)站省去了很多的控件，同時也省去了不少建立和維護的功夫。響應式布局就是一種流體，在按百分比縮放時也能相當?shù)牧鲿场?/p>
使用響應式設(shè)計，你要記住所以的布局。這當然可能會使過程混亂，并且使設(shè)計更加復雜。這就意味著你應該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。 所以通常的做法是，在一個新的項目中使用響應式設(shè)計，在后期的改造中使用自適應設(shè)計。
自適應可用于改造現(xiàn)有的網(wǎng)站使其更好地適應移動端。這使你的設(shè)計可控制和開發(fā)多個特定的視圖。你開發(fā)視圖的數(shù)量完全取決于你，你的公司和全面的預算。然而，它也提供了一定量的控件（例如在內(nèi)容和布局上），如此你便無須使用響應式設(shè)計。但當你設(shè)計多種分辨率時你會發(fā)現(xiàn)，在改變窗口大小的時候?qū)疤觥辈季帧?/p>
自適應網(wǎng)站可以用于設(shè)計和開發(fā)一個擁有多個自適應視圖的網(wǎng)站。所以這種設(shè)計通常用于改造網(wǎng)站。
前，昆明網(wǎng)站建設(shè)公司用自適應技術(shù)幫助客戶制作網(wǎng)站已成為一種規(guī)范標準，為何自適應網(wǎng)站設(shè)計成為企業(yè)建站的首選，因為自適應網(wǎng)頁設(shè)計方式會自動檢測屏幕大小以載入合適的布局，當你在電腦或手機瀏覽網(wǎng)頁，網(wǎng)站會自動地檢測和選擇蕞佳的屏幕布局。
只需在HTML的<head>標簽中插入一個<meta>標簽，<meta>標簽中可以設(shè)置具體的寬度(如像素值)或者縮放比例2.0(設(shè)備實際尺寸的兩倍)，下面是將一個頁面放大到設(shè)備實際尺寸兩倍顯示的meta標簽示例:
<meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=yes”/>
如果不允許調(diào)整頁面大小，那么把user-scalable=yes改為user-scalable=no，如：
<meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=no”/>
CSS引用以下代碼來控制屏幕輸出的效果
@media screen and (max-width:1600px) {
}
自適應網(wǎng)頁必須與多個終端設(shè)備顯示結(jié)合在一起，所以需要裝載幾組css代碼，網(wǎng)站打開的速度略比非自適應網(wǎng)站要慢一點，當然如果解決得好，這一慢的速度可以忽略。
所以在做自適應網(wǎng)站的時候一定要注意速度，減少編碼，配備更強的服務器。
對于一些新手網(wǎng)頁設(shè)計者在設(shè)計網(wǎng)站頁面，由于缺乏經(jīng)驗，設(shè)計風格過于獨特，連到移動端的情況下就會出現(xiàn)無法寫出及兼容問題，所用色彩及布局，盡量使用扁平化風格試，不僅加載速度，修改也比較簡單方便。
因此，在設(shè)計時，必須要充分考慮多終端設(shè)備需融合的實際效果，網(wǎng)站頁面設(shè)計師除了會做平面圖，也要掌握部分前端開發(fā)，才能做出符合標準的自適應網(wǎng)站。
自適應網(wǎng)站普遍會存在一個問題就是兼容性，我們必須對網(wǎng)站進行多個屏幕尺寸大小測試，并通過各種瀏覽器進行檢測，一般使用IE游覽、Firefox瀏覽器、Google這三個瀏覽器測試，因為其他瀏覽器大部分都用他們的核心，用這三個瀏覽器看有沒有兼容存在bug。
自適應網(wǎng)頁如何設(shè)計_云南才力網(wǎng)站建設(shè)公司
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
