天貓網站能做自適應設計_如何去設計一個自適應的網頁設計或html5

1、網站怎麼做到自適應網頁？

關於網站如何做到自適應網頁，可根據如下操作：
首先，在網頁代碼的頭部，加入一行viewport元標簽。<metaname=」viewport」content=」width=device-width, initial-scale=1″ />viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度(width=device-width)，原始縮放比例(initial-scale=1)為1.0，即網頁初始大小占屏幕面積的100%。
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow(溢出)，避免了水平滾動條的出現。
「自適應網頁設計」的核心，就是CSS3引入的Media Query模塊。它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
其次，除了布局和文本，」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。

2、如何編寫自適應網頁

工具/原料

dm網頁設計軟體
ps圖像處理軟體
方法/步驟

在網頁代碼的頭部，加入一行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;
3
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
例如：
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
4
流動布局（fluid grid）
"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
5
"自適應網頁設計"的核心，就是CSS3引入的MediaQuery模塊。
它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就載入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文件。

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

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

4、html頁面怎樣能夠自適應電腦屏幕寬度？

網友們上網通常會採用800×600、1024×768兩種解析度，由於網頁不是用來給自己看的，所以我們必須讓自己的網頁能夠兼顧這兩種情況，讓不同解析度設置的網友都能夠看到一個排版美觀正確的網頁。
一、自然拉伸
如果你的網站結構沒有用到大量的圖形來銜接，主要由表格來定結構，那麼你就可以使用該方法。非常適用於主要由表格、文字來表達信息的簡單的網頁頁面。製作表格時，只要你把表格的寬度屬性定義為100%
，表格就會根據解析度的不同自行調整寬度。
二、固定居中

在800×600解析度下製作的網頁在1024×768解析度的機器上打開，整個網頁就會跑到左邊；1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧？做起來費勁。所以目前普遍採用的方法是固定居中法！

現在大多數網民都還在用800*600的解析度，所以我們一般可以以此解析度為主。只要在網頁原代碼的<body>後緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個要注意的是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設的是百分比，那麼使用大於800×600的像素時，網頁就會拉寬，這樣網頁可能會變形。在<body>中加入leftmargin=0，即<body
leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時不會出現滾動條。還有一點要注意的是不能用DW中的層來定位。
三、兵分兩路
如果你的網頁不經常更新，而且對頁面效果極其在意，那好，你就設計兩個頁面，分別對應800×600和1024×768兩種解析度。然後根據不同的解析度進行跳轉就行了。

例如：

<script LANGUAGE="JavaScript">
function redirectPage() {
var
url_else = "http://www.163.com/";
var
url_800x600 = "http://www.sohu.com/";
var
url_1024x768 = "http://www.sina.com.cn/";
var url_1366x768
= "http://www.qq.com";
if ((screen.width ==
800) && (screen.height == 600))
window.location.href= url_800x600;
else if ((screen.width == 1024) &&
(screen.height == 768))
window.location.href=
url_1024x768;
else if ((screen.width == 1366) && (screen.height ==
768))
window.location.href=
url_1366x768;
else

window.location.href=
url_else;
}
</script>

5、自適應網站設計的優勢有哪些？

隨著移動互聯網的盛行，為解決如今各式各樣的瀏覽器解析度以及不同移動設備的顯示效果，設計師提出了響應式布局（也就是自適應布局）的設計方案。
簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

自適應網站設計的優點：
1. 面對不同解析度設備靈活性強
2. 能夠快捷解決多設備顯示適應問題
3.維護方便,一個後台就可以管理
4.可以實現更多的酷炫功能

當然也會有其缺點：
1. 兼容各種設備工作量大
2. 代碼累贅，會出現隱藏無用的元素，載入時間加長
3. 其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果

總體來說，優點還是要大於弊端的，自適應網站設計是未來發展的趨勢。

6、網站怎麼做到自適應網頁

使用html的媒體查詢就能做到

@media screen and (max-width:480px){
#mainbody{
margin:0px;
width:100%;
}
#tp img{
width:100%;
max-width:480px;
display:block;
}
#b_news li{
width:100%;
border:1px solid red;
}
}
@media screen and( max-width:900px) {
#mainbody{
margin:5px 5px;
width:100%;
}
#tp img{
width:100%;
max-width:900px;
display:block;
}
#b_news li{
width:100%;
border:4px solid red;
}
}

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

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、自適應網頁設計怎麼製作?

隨著越來越多的人使用手機上網，使自適應網頁設計技術變得越來越流行。自適應網頁設計指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。當然，對一個新手來說可能聽起來有點復雜，其實它比你想像的簡單多了（前提你有css基礎）。
1、在HTML頭部增加viewport標簽。
在網站HTML文件的開頭，增加viewport meta標簽告訴瀏覽器視口寬度等於設備屏幕寬度，且不進行初始縮放。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低於IE8的瀏覽器。
IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js腳本實現支持。

2、在CSS文件尾部增加針對不同屏幕解析度的規則。
例如使用如下的代碼，可以讓屏幕寬度低於480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog，WordPress相關標簽名稱只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float:none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局寬度使用相對寬度。
網頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 裡面增加各個div的針對小屏幕的寬度，實際上更麻煩。
4、頁面使用相對字體（非必要）
在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。
5、圖片自適應（非必要）
img標簽的話，只需要設置 max-width:100%;或width:100%;語句為：img { max-width:98%;}
css載入的background-image如何自適應大小呢，其實CSS3中是可以實現的，添加如下語句：background-size:100% 100%;

導航:首頁 > 萬維百科 > 天貓網站能做自適應設計

天貓網站能做自適應設計

與天貓網站能做自適應設計相關的知識