自適應網站需要幾套設計圖

1、如何輕松設計自適應郵件模板？

廣大郵件營銷用戶一直都在尋找高質量響應式電子郵件+操作簡捷的發送平台。U-MAIL郵件營銷平台新一代多功能可視化編輯器，傻瓜式操作，一鍵拖拽模板，龐大的專業模板素材庫，無需專業人員，五分鍾就能輕松搞定郵件模板的設計與發送。

有著強大的自適應模式，無論讀者在手機、PC、平板都可以完整的查看，讓你的郵件以最美的形式呈現！

下面詳細介紹一下U-Mail郵件營銷平台視化郵件模板編輯功能使用過程：

U-MAIL郵件模板管理——可視化編輯（常見稱呼：拖拽式模板編輯），可按自己的需求來選擇版塊，上傳圖片、調整文字，背景顏色後會組合成一封完整的HTML頁面郵件。與源碼編輯同樣，一個模板支持添加多個主題後，在發送時主題可輪流發送。

1、郵件正文的組成版塊選擇：

左菜單欄中有圖片，圖片+文字，文字，標題，分割線等項目可供選擇，區塊也可自由修改排列的順序。

2、文字、按鈕的樣式修改：

文字大小，顏色，超鏈接，變數，按鈕顏色，邊框角度，均可自行設置調整。

3、全局樣式與定製區塊的設置

全局樣式：可設置整個內容的郵件背景色，頁面背景色定製區塊：可選擇某一個版塊後，修改此版塊的郵件背景色，頁面背景色

4、表格的插入與屬性修改

支持和word同類操作的快捷方式插入表格；表格（單元格）的高寬度，表格行列的刪除，增加，修改；

5、圖片上傳及圖片庫的管理：

圖片上傳及替換：點擊圖片按鈕，選擇本機上的圖片直接上傳，或直接進入圖片庫中選擇之前已上傳發送過的圖片進行插入替換。圖片庫管理：平台會自動把圖片存入圖片庫中，一頁顯示16張，超過16張則翻頁查詢，目前保存時間為永久保存。**註：可視化編輯時，暫時不支持上傳附件！**

6、指定區塊設置

並列圖文：主題，按鈕，圖片可設置不顯示；圖片高度也支持自行調整。左右圖片：圖片的鏈接，超鏈接，備用文字可均為可視化編輯。

7、PC端，平板，手機端收到後的效果預覽

PC端預覽效果

平板端預覽效果

手機端預覽效果

2、響應式設計 同一張圖片分別用img和background調用，如何讓他們自適應屏幕的大小？顯示的效果一樣

img的思路：JS獲取IMG的長寬比例，然後獲取容器的長寬比，如果容器的長：寬大於或者等於IMG的長寬比例，就把IMG的寬度設置成100%，高度auto，反之則把IMG的高度設置成100%，寬度auto。在CSS裡面添加img{margin:0 -100%}，用display:tabel-cell來做垂直居中(未實驗)。

background的實現方法(CSS3)：用background必須要CSS3才能自適應，代碼是

background-size:cover;backgrond-attachment:fixed;background-position:center;

效果一樣

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

4、自適應濾波器設計 電路圖怎麼搭建

自適應濾波器除非你要用古老的模擬電路搭一堆運放，否則基本就是個單片機最小系統，可能需要加入輸入輸出調理電路

5、響應式設計怎麼讓圖片自適應

總結起來就兩條：
1.怕麻煩，width設成100%妥妥的。
2.不怕麻煩，媒體查詢一個個的解析度情況下設置。

6、DW6網頁設計怎麼把框架和表格一起用，往表格插入圖片並且圖片，表格和框架都能自適應屏幕解析度

朋友你好，解析度是可以自行調節的，請進入相機，再進入設置，進入高級功能，將簡單模式取消，就可以在設置中詳細的設置拍攝參數。

7、如何讓網站自適應手機

關於網站如何做到自適應網頁，可根據如下操作：
首先，在網頁代碼的頭部，加入一行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規則。
其次，除了布局和文本，」自適應網頁設計」還必須實現圖片的自動縮放。有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。

8、如何設計網頁寬度自適應屏幕，圖片也自適應大小，但不能超出它的原始大小。

這位網友你好，想要網頁寬度自適應，你需要把網頁元素寬度設置為百分比，還要在網頁頭部加上代碼：

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

圖片自適應，且不超過原始大小，需要設置最大寬度，代碼如下：

img{
  width:100%;
  max-width:100%;
}

9、已經設計好圓角矩形圖並切分成九宮圖,求一套CSS+div方法編寫成內容高度自適應`寬度自適應的方法!

汗，這個不是有個橫向和縱向背景重復嗎？你這樣切圖是錯的……。

切成三塊就行內了，HTML代碼容

<div><img src="切出來的頭部圖片URL"></div>

<div style="background-image:url(切出來的中間部分圖片URL);height:auto;background-repeat:y-repeat;"></div>

<div><img src="切出來的尾部圖片URL"></div>

10、HTML5如何利用rem實現自適應布局

分析設計圖

假設設計圖大小為1080px。這也就意味著，在開發時，需要兼容的最大解析度為1080px，最小的為320px。

2. 調整視口

代碼實例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>布局之路-移動端開發實例</title>
    <meta name="viewport" content="width=device-width,user-scalable = no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

3. 確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。

代碼實例：

    <style type="text/css">
        html {
            font-size: 42px;
        }
    </style>

4. 按照設計圖的像素進行開發

按照正常網頁開發流程，進行網頁開發即可。

5. 使用百分比和rem替換px

代碼效果對比：

/*使用固定像素*/
.box {
    float: left;
    width: 658px;
    font-size: 72px;
    text-align: center;
    line-height: 195px;
}
/*使用百分比和rem*/
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

代碼解析：

水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。

垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。