自適應網頁設計要注意哪些

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

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

2、如何讓網頁自適應所有屏幕寬度

「自適應網頁設計」到底是怎麼做到的？其實並不難。

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

2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼
不能指定像素寬度：width:xxx px;
只能指定百分比寬度：
width: xx%;
或者
width:auto;
3、相對大小的字體
字體也不能使用絕對大小（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文件中載入。
五、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.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});

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

手機上網固然便捷，但是對於網站設計師而言，卻又得面臨新的難題：如何才能在不同大小的設備上呈現同樣的網頁?手機和電腦的顯示是有很大差別的，以前用電腦打開網站是很正常的，但是很可能在手機上的顯示就非常的不適於人閱讀。 很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，這樣固然保證了效果，但是比較麻煩，同時要維護好幾個版本，大大增加了架構設計的復雜度。「自適應網頁設計」指可以自動識別屏幕寬度、並做出相應調整的網頁設計。 「自適應網頁設計」到底是怎麼做到的? 首先，在網頁代碼的頭部，加入一行viewport元標簽。 viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度(width=device-width)，原始縮放比例(initial-scale=1)為1.0，即網頁初始大小占屏幕面積的100%。 由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。 「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow(溢出)，避免了水平滾動條的出現。 「自適應網頁設計」的核心，就是CSS3引入的Media Query模塊。它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。 除了布局和文本，」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。

4、如何去設計一個自適應的網頁設計或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條設計准則，我相信你們可以很快的設計出自適應的網頁出來

5、如何製作自適應網頁，自適應網站設計中的關鍵要點

CSS3收入MediaQuery模塊；自動探測屏幕寬度，然後載入相應的CSS文件。
————————————————————————————————
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。

6、響應設計網頁設計在pc端注意什麼

一.PC網頁設計規范 固定的內容： 1.PS中設計解析度為：72像素/英尺(圖片質量的像素點) 2. 顏色模式RGB 8位(顯示器的三原色紅，綠，藍為RGB)
不固定的內容： 1.網頁背景 a.純色背景平鋪(自適應瀏覽器) b.漸變色或底紋平鋪背景(自適應瀏覽器) 目前網頁設計中都會做通欄大圖，以方便吸引客戶，增加網站整體美觀 c.通欄大圖
二.屏幕解析度 1.標准解析度：1024px*768px(目前10%-20%的用戶在用) 主體設計內容寬度：1000px(常用寬度：960px，1170px，980px，1100px，1200px) 首屏高度大約在700px
2.常用解析度：1280px*768px 主體設計內容寬度：1200px(常用寬度：1190px，1170px，1100px，1200px) 首屏高約：750px
三.設計文檔大小 1.PS中新建文檔寬要大於主體設計內容的寬度(目的為了表現設計意圖，展示背景效果，左右寬度最少200px) 2.設計到通欄大圖片新建文檔的寬度：1920px，所有的設計文檔寬1920px主體內容根據具體情況而定(主體內容要是想要適應所有用戶必須低於1000px)

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

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;
}

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

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

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

全屏寬度主要在於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" /> 

解釋：

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

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

10、網頁設計應該考慮哪些要素

網站設計是網站展示的核心，做為一名合格的網頁設計師，腦袋裡應該裝著豐富的網頁知識，如果朋友您以前沒有做過，那麼一定要對這個職業有一種的了解。網頁設計師是一個主動還是被動，完全取決於一個人的態度與思維，如何做好網頁設計師？下面小編從幾個細節里同大家分享一下：

網頁設計應該考慮哪些要素
網頁設計應該考慮哪些要素
尺寸
網站最先開始的是尺寸，一定要對網頁設計的尺寸熟悉，尺寸又是解析度的原理，由於每個電腦尺寸不一樣，因此解析度是有差異的，如現在的電腦屏幕尺寸有980，1038，1280等一系列的，那麼網站的主體內容規劃就要做好提前規劃。
網頁設計應該考慮哪些要素
顏色
一個網站的顏色一般有三個色調系的，其中分別是主，次，搭配，三個結合，做網頁前，一定要先定好網站的顏色，調好色系搭配。
網頁設計應該考慮哪些要素
部件
配套的網頁部件是一定要自己先製作好的，如某一些按鈕，一些圖標之類的系列部件，都是需求設計人員先設計完善，然後當用到時，直接PS上去即可，這一類都是配套製作的。不提前設置好，將會與網站搭配不協調。
網頁設計應該考慮哪些要素
技術
設計師如果沒有技術功度，那一切都是紙上談兵，而且作為一個網頁設計師，不僅只懂PS就行，flash,這些也是必會的功能之一。簡單的懂一些網頁製作源理，以及簡單的代碼。
網頁設計應該考慮哪些要素
感應
網頁設計師在製作頁面時，不光光只想到當前頁面，還要想到頁面上的感應反應，這樣前端設計師才會知道當滑鼠觸摸時，感應應該是怎麼樣的，另外一個網站上同樣類型的感應應該都是統一的（小編就遇到菜鳥設計師，各種頁面同一個感應都是不同的顏色。）
網頁設計應該考慮哪些要素
6
排版
排版是很重要的，也是創意的重要體現，哪些頁面放什麼內容，頁面的視覺讓人怎麼樣，通常頁面內容都是設計師自己規化一些，如果啥都不想，等著需求同事弄，那隻能說是一個不是很合格的設計師。