設計自適應網頁時注意事項_如何進行自適應網頁設計

1、如何製作自適應網頁

自適應網站，顧名思義是指網頁自適應顯示在不同大小終端設備上，一次設計，普遍適用，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局。自適應網站設計也通常被稱作做響應式網站設計。

因為自適應網站設計的難易程度，其有設計難、實現難、成本大三個缺點，因此在建設自適應網站的時候需要我們仔細推敲。需要考慮的內容更為廣泛，而且還有考慮其他方面的一些問題。比如可讀性、區域面積及不同設備下運行的狀態等。這對於設計師的要求甚高，這樣導致要做一個完美自適應網站變得很難，所以據另貓電商可知在建設自適應網站的時候，要注意幾點，避免中途出現差錯。

一HTML5、CSS3為基礎，因此現在能夠將這兩種技術運用到恰到好處的網站設計師並不多見，如果設計師對這兩種技術不夠精通，會導致就算設計師做出很棒的頁面，但是實現以後，不會完全一模一樣。

而且因為自適應設計需要對多個界面兼容、功能調試，導致整個製作過程需要UI設計師和前端工程師要不斷磨合製作。而測試人員也要在不同的設備下對網站進行測試。自適應的網站需要有很多功能，比如界面的融合、功能的調試等，這些都是需要不斷磨合才能實現

自適應網站設計的注意事項

將網頁修改為百分比布局

當某個瀏覽窗口處於媒體查詢固定的范圍之外，網頁就需要水平滾動才能完整瀏覽，而通過百分比布局可以頁面元素根據窗口大小在一個又一個媒體查詢之間靈活修正樣式，具體來講，就是css代碼不會指定具體像素寬度：width:xxx px;而是會指定一個百分比寬度：width:xx%;或者直接就是width:auto;（簡易的公式將固定像素寬度轉換成對應的百分比寬度：目標元素寬度÷ 上下文元素寬度 = 百分比寬度）

要阻止移動瀏覽器自動調整頁面大小

瀏覽器支持viewport meta元素覆蓋默認的畫布縮放設置，需在HTML的<head>標簽中插入一個<meta>標簽，<meta>標簽中可以設置具體的寬度(如像素值)或者縮放比例2.0

用CSS如何控制網頁中圖片自適應大小

在設計自適應網站頁面時圖片自動適應大小，在進行製作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制

用em替換px

流動布局（fluid grid）的使用，「流動布局」指的是各個區塊的位置都浮動，不是固定不變的。

.main {float: right;width: 70%;}

.leftBar {float: left;width: 25%;}

這么做的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向溢出，避免了水平滾動條的出現，提升了用戶的閱讀體驗。另外，絕對定位（position:absolute）的使用，也要非常小心。

2、設計網站界面要有哪些注意事項

一、合理的頁面版式
設計網頁時，一定要注意頁面版式的合理性。一個合理的版式和讓人一目瞭然的網頁能夠給人帶來舒適的感覺，並且會讓人願意花時間去了解。注重版式的設計，不要板塊冗雜；頁面版式的搭配，注重協調簡潔。合理地搭配設計頁面中的版式，呈現一個清新的網頁。
二、舒緩的色彩設計
無論哪個行業的網頁，在設計過程中都不要一味地追求視覺刺激，做出奇異的色彩搭配。在設計網頁的過程中，設計者一定要注重頁面色彩的搭配，多用暖色調，協調搭配冷暖色。只有色彩足夠協調、舒緩，才能夠讓人有繼續停留的念頭。
三、新穎的網頁內容
網頁中的內容，猶如人的靈魂不可或缺。設計一個網頁，肯定都是想要宣傳某個企業或產品，而網頁中的內容更是不能夠缺少的。現今，想要用內容吸引用戶，就一定需要有新穎的內容，從文字或者其他形式的內容出發，注重原創和內容的新穎。
四、減少使用特殊字元
設計網頁時，盡量少用特殊字元。在不同的計算機或者不同的平台中，看到的情況有時候有一些差別，如果使用了特殊字元，很可能會有比較糟糕的展示效果，所以應當盡量減少特殊字元的使用。
以上幾點，介紹了設計網頁時一定需要注意的問題，其實，這其中還有很多其他的細節需要設計者注意。總的來說，在設計網頁的過程中，把握好頁面版式、顏色搭配、內容以及字元等等，就大體能夠做出一個優秀的網頁。

3、如何進行自適應網頁設計

做網站讓頁面自適應大小方法代碼如下：

一、電腦站設置網站自適應方法

全屏寬度主要在於CSS代碼中，將width為100%，而不是一個固定的像素值，代碼如下。

手機網設置網自適應方法：

在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解釋：

4、對於網頁的自適應，需要用到什麼標簽或者屬性

itjob就是一個不斷學習的職業，不斷調試bug的過程，關於網頁自適應有如下解決方案：

阻止移動瀏覽器自動調整頁面大小
iOS和Android瀏覽器都基於webkit核心，這兩種瀏覽器以及其他的很多瀏覽器都支持viewport meta元素覆蓋默認的畫布縮放設置，只需在HTML的<head>標簽中插入一個<meta>標簽，<meta>標簽中可以設置具體的寬度(如像素值)或者縮放比例2.0(設備實際尺寸的兩倍)，下面是將一個頁面放大到設備實際尺寸兩倍顯示的meta標簽示例:
<meta name=」viewport」 content=」initial-scale=2.0,width=device-width」/>

用em替換px
同樣，目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度這個公式也適用於將文字的像素單位轉換為相對單位，值得注意的是，現代瀏覽器的默認文字都是16像素，因此一開始給body標簽應用下列任何一條規則所產生的效果都一樣:
font-size: 100%;
font-size:16px;
font-size: 1em;

流動布局（fluid grid）的使用
「流動布局」指的是各個區塊的位置都浮動，不是固定不變的。
.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
這么做的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向溢出，避免了水平滾動條的出現，大大提升了用戶的閱讀體驗。另外，絕對定位（position:absolute）的使用，也要非常小心。

Media Query技術的使用
在自適應設計的技術中，css3支持css2.1定義的媒體類型，同時添加了很多涉及媒體類型的功能屬性，包括max-width(最大寬度)，device-width(設備寬度，orientation(屏幕定向:橫屏或豎屏)，因此可以通過Media Query載入相應的CSS文件. 例如，下面代碼定義了如果頁面通過屏幕呈現，並且屏幕寬度不超過480px,則載入shetland.css
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"　href="shetland.css" />
同樣可以創建多個樣式表，以適應不同設備或者不同解析度的寬度范圍，當然更有效的做法是將多個Media Query整合在一個樣式表文件中:
@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}

5、自適應網頁設計和響應式網頁設計有什麼區別

通俗的說，自適應網頁設計也是響應式網頁設計，響應式網頁設計也是自適應網頁設計。但是真正的細分起來，自適應只是響應式的一個子集，指網頁中整體大圖的自適應或者banner的自適應。

響應式設計可以一個網站兼容多個不同終端

響應式網頁設計優勢：流體網格的網站適合響應式網頁設計。

1、靈活性強，可以適應不同解析度的設備

2、方便快捷的解決多設備顯示適應問題

自適應網頁設計優勢：固定斷點的網站適合自適應網頁設計。

1、實施起來代價更低，測試更容易

2、自適應布局可以讓設計更加可控，因為它只需要考慮幾種狀態就可以了

雖然響應式/自適應網頁設計會帶來兼容各種設備工作量大、代碼累贅、載入時間長的缺點，但它們能「一次設計，普遍適用」，可以根據屏幕解析度自適應以及自動縮放圖片、自動調整布局，它們不只是技術的實現，更多的是對於設計的全新思維模式。

6、網頁設計中，使用自適應寬度有什麼缺點嗎

網站都是用960px，那是因為這些頁面很大可能不是設計師自己設計的，只是偷懶套用模板而已。
如果你是初學者建議先用TABLE布局，簡單明了，但缺點就是太死板，沒DIV+CSS靈活。
自適應寬度對於簡單的頁面沒什麼大問題，而且省事，但對於復雜的頁面就不行。
就拿img標簽來說吧，如果你不定義寬和高，那你圖片的大小就無法控制，圖片多大就在頁面顯示多大，如果圖片很大，那你還得用圖像製作軟體把圖片改小在放入IMG控制項，那多麻煩。如果你自定義的話<img width="500px" height="500px"/>，就會自動把你的圖片大小調整到你自定義的寬和高500*500，這樣方便多了，不過不建議你把小圖調大，這樣圖片的像素會變模糊，但大圖調小是絕對可以的。對於其它的控制項也是一個道理，我是不建議自適應寬和高，因為到時候你如果發覺布局不對了，就很麻煩，有的改了，事先自定義好，方便以後的維護同時可以有效的控制單元格的位置。
不建議在設計頁面的時候使用自適應的寬和高，這種寫法絕對是懶人的寫法，而且只適合比較簡單的頁面。

7、自適應網頁製作怎麼做自適應網頁

做網站讓頁面自適應大小方法代碼如下：一、電腦站設置網站自適應方法全屏寬度主要在於CSS代碼中，將width為100%，而不是一個固定的像素值，代碼如下。手機網設置網自適應方法：在網頁頭部加上這樣一條meta標簽：解釋：width=device-width：寬度等於設備屏幕的寬度。initial-scale=1.0：表示：初始的縮放比例。minimum-scale=0.5：表示：最小的縮放比例。maximum-scale=2.0：表示：最大的縮放比例。user-scalable=yes：表示：用戶是否可以調整縮放比例。

8、如何去設計一個自適應的網頁設計或html5

如今移動互聯網隨著3G的普及，越來越火爆，更多需求跟隨而來！APP應用市場和APP應用數量成倍成倍的增長！從而給移動互聯網帶來新的挑戰！
移動設備正超過桌面設備，成為訪問互聯網的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁看
手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，並不是一件容易的事。
很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的復雜度。
於是，很早就有人設想，能不能地一次設計，普遍適用地，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局（layout）看
一、了解什麼是地自適應網頁設計地
自從2010年，Ethan Marcotte提出了逗自適應網頁設計地（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。
他製作了一個範例，裡面是《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大於1300像素，則6張圖片並排在一行。
如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。
如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。
如果屏幕寬度在400像素以下，則6張圖片分成三行。
mediaqueri.es上面有更多這樣的例子。
這里還有一個測試小工具，可以在一張網頁上，同時顯示不同解析度屏幕的測試效果，我推薦安裝。
二、需要允許網頁寬度自動調整
逗自適應網頁設計地到底是怎麼做到的看其實並不難。
首先，在網頁代碼的頭部，加入一行 viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。

三、在進行設計的時候不能使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
四、相對大小的字體
字體也不能使用絕對大小（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）或瀑布流
逗流動布局地的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要非常小心。
六、選擇性載入CSS
逗自適應網頁設計地的核心，就是CSS3引入的 Media Query模塊。
它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就載入tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。
除了用html標簽載入CSS文件，還可以在現有CSS文件中載入。
@import url(逗tinyScreen.css地) screen and (max-device-width: 400px);
七、CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
八、圖片的自適應（fluid image）
除了布局和文本，地自適應網頁設計地還必須實現圖片的自動縮放。
這只要一行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.getElementByIdx_x(逗content地).getElementsByTagName_r(逗img地);
imgSizer.collate(imgs);
});
不過，有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。
只要遵循這8條設計准則，我相信你們可以很快的設計出自適應的網頁出來

導航:首頁 > 萬維百科 > 設計自適應網頁時注意事項

設計自適應網頁時注意事項

與設計自適應網頁時注意事項相關的知識