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