『壹』 怎麼製作html5網站頁面讓它適應電腦和手機的尺寸
用以下代碼開頭：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
使用百分比定義寬度，，
CSS代碼可以適當使用：
@media only screen and (max-width:449px){
}
自動根據屏幕像素 調用不同的CSS代碼。
『貳』 怎麼讓網頁適應不同解析度的電腦
以oppo R9 plus手機為例：
1、手機打開瀏覽器後，點按中間的[3]。
『叄』 如何讓網頁在瀏覽器自適應屏幕大小
方法：
1、在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解釋：
width=device-width ：寬度等於設備屏幕的寬度
initial-scale=1.0：表示：初始的縮放比例
minimum-scale=0.5：表示：最小的縮放比例
maximum-scale=2.0：表示：最大的縮放比例
user-scalable=yes：表示：用戶是否可以調整縮放比例
另外：如果想控制字體的大小的話，應該使用相對大小，可以用下面這段代碼，一般不用也可，這里只是說明一種方法。
相對大小的字體
字體也不能使用絕對大小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）。
2、讓網頁適應不同的瀏覽器
瀏覽器的格局現在是兩分天下，一分是IE，另一分是NetScape，在國內Ie有絕對的佔有率，在這種情況下我們設計的網頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網站，但只要注意以下幾點，做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果：
a、不要混合使用層和表格排版，如果是父子關系，如層中表格，不在此原則范圍內。
b、內聯式的 CSS 在 Netscape Navigator 中經常會出現問題，使用鏈式或內嵌式。
c、有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 里的效果。
d、對於只有幾個像素寬度或高度的層，改用圖片來實現。
e、避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。
『肆』 網頁設計合適的頁面尺寸是多少
網頁設計選用的解析度是72像素，使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計，一般採用全屏展示和兩側留白的方式。
全屏展示，是整個網站看起來大氣一些，但是布局要合理安排，不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸，能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域，內容限時區域在好控制在1000px-1200px。
『伍』 如何使網頁自適應電腦屏幕解析度，不管多大的解析度都是全屏顯示的
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）。
『陸』 怎麼實現網站的響應式布局，適合不同解析度
如我們需要兼容不同屏幕解析度、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，怎樣才能做到讓一種設計方案滿足所有情況？對此，馬海祥覺的我們的布局應該是一種彈性的柵格布局，不同尺寸下彈性適應，如以下頁面中各模塊在不同尺寸下的位置：
那麼我們具體要怎麼做呢？
1、Meta標簽定義
使用 viewport meta 標簽在手機瀏覽器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
通過快捷方式打開時全屏顯示
<meta name="apple-mobile-web-app-capable" content="yes" />
隱藏狀態欄
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉
<meta name="format-detection" content="telephone=no" />
2、使用Media Queries適配對應樣式
常用於布局的CSS Media Queries有以下幾種：
設備類型(media type):
all所有設備；
screen 電腦顯示器；
print列印用紙或列印預覽視圖；
handheld便攜設備；
tv電視機類型的設備；
speech語意和音頻盒成器；
braille盲人用點字法觸覺回饋設備；
embossed盲文列印機；
projection各種投影設備；
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。
設備特性(media feature):
width瀏覽器寬度；
height瀏覽器高度；
device-width設備屏幕解析度的寬度值；
device-height設備屏幕解析度的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大於等於寬度時該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。
例子：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
適用於布局的Media Queries，這里在馬海祥博客上我們就不再做詳述，有興趣的話，可通過官方文檔進一步了解。
3、表格(table)的響應式處理
那麼對於表格(table)的響應式處理該是怎樣的呢？我們該如何突破Table的局限性呢？接下來我們來了解以下的幾種針對表格響應式處理的方法：
（1）、隱藏不重要數據列
處理前：
（點擊查看大圖）
處理後：
實現方法代碼：
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}
以用戶角度思考，每個人對數據的認知不同，或許你隱藏的數據對於他卻是很重要的，所以對於這種方法馬海祥並不推薦。
（2）、多列橫向變2列縱向
處理前：
處理後：
實現方法：<thead>定位隱藏，<td>變塊元素，並綁定對應<th>列名，然後用偽元素的content:attr(data-th)實現<th>：
（3）、固定首列，剩餘列橫向滾動
處理前：
處理後：
實現原理代碼：
thead {float:left;}
tbody {display:block;width:auto;overflow-x:auto;}
二、響應式內容
1、響應式圖片
帶寬是手機終端的硬傷，如果我們只是頁面布局做了響應式處理，在我們用手機訪問時，請求的圖片還是PC上的大圖；文件體積大，消耗流量多，請求延時長，因此導致的問題也是不可估量的。那麼我們就得把圖片也處理成響應式的根據終端類型尺寸解析度來適配出合理的圖形。
處理原理：瀏覽器獲取用戶終端的屏幕尺寸、解析度邏輯處理後輸出適應的圖片，如屏幕解析度320*480，那麼我們匹配給它的是寬度應小於320px的圖片。如果終端屏幕的DPI(device pixels)DPI詳解值很高，也就是高清屏，那麼我們就得輸出2倍解析度的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動終端的屏幕參數可通過http://screensiz.es/phone查詢。
解決方案：其實W3C已經有一個用於響應式圖形的草案：新定義標簽<picture>，因為它還只是草案，目前還沒有支持的瀏覽器，期待在不久的未來我們能用上。雖然目前不支持，但我們還是來了解下，為之後的內容做個鋪墊。
<picture>是一個圖形element，內容由多個源圖組成，並由CSS Media Queries來適配出合理圖形，代碼規范如下：
<picture width="500" height="500">
<source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
<!-- Fallback content-->
<noscript>
<img src="external/imgs/small.jpg" alt="Team photo">
</noscript>
</picture>
註：source: 一個圖片源；
media: 媒體查詢，用於適配屏幕尺寸；
srcset: 圖片鏈接，1x適應普通屏，2x適應高清屏；
<noscript/>: 當瀏覽器不支持腳本時的一個替代方案；
<img/>: 初始圖片；另外還有一個無障礙文本，類似<img/>的alt屬性。
雖然<picture>目前還不支持，但它的原理我們是可借鑒的，所以就誕生了一個用於圖片響應式處理的類庫Picturefill
<span data-picture data-alt="圖片描述文本">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- 瀏覽器不支持JS時的備用方案. -->
<noscript>
<img src="external/imgs/small.jpg" alt="圖片描述文本">
</noscript>
</span>
其原理就是JS獲取Source的源以及CSS Media Queries規則，輸出適應圖片，邏輯細節這里不再解析，感興趣的可查看其JS代碼，邏輯不是很復雜，也可以自己封裝一個類庫，以適用於自身產品，例如圖片載入失敗的替代方案。
當然，在未來的CSS Image Level 4中已經實現了響應式圖片的原生語法：image-set
<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
<image-set-decl> = [ <image> | <string> ] <resolution>
那麼我們的響應式圖片可以這樣重寫了
background-image:url(default.jpg); /* 普通幕 */
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */
註：Webkit 目前只實現了 url() 形式的取值，且dppx值取負值[-2x]貌似也是合法的。
當然除此之外，還有其他的響應式處理，如服務端user-agent嗅探。
2、高解析度(DPI)下的響應式處理
（1）、SVG：優點可承載色彩豐富、設計復雜圖形，且渲染不會出現邊緣不順滑；缺點是IE的支持不完美。
（2）、Icon fonts：支持多瀏覽器，圖形顏色大小的修改成本低，易於維護；圖形表現單一，不支持色彩豐富且復雜的圖形，IE6渲染有毛邊。
（3）、-webkit-image-set:只支持單個圖形的適配，不利於圖形合並，兼容不完美（Safari 6+, Chrome 21+）。
JS檢測：var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
3、高解析度下的1px border
由於高清屏的特性，1px是由2×2個像素點來渲染，那麼我們樣式上的border:1px在Retina屏下會渲染成2px的邊框，與設計稿有出入，為了追求1px精準還原，我們就不得不拿出一個完美的解決方案。
在Photoshop中，如果需要看似0.5px的邊框，常見的方法就是對1px邊框加上陰影模糊1px。同理，我們在retina屏下需要做到真實的1px邊框，可利用box-shadow屬性模擬。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}
『柒』 如何調整網頁大小與屏幕適應
第一種方法：可以按著Ctrl鍵，然後滾動滑鼠滑輪對網頁大小進行調整。調整到與電腦屏幕大小相適應的程度即可。
第二種方法：點擊瀏覽器右下角的縮放頁面比例，然後對網頁進行相對應的調整即可。
『捌』 網頁設計的寬度一般為多少應該怎麼把握
網路統計流量研究院對於2017年上半年的解析度使用情況統計得出。
排名第一的是360×640，這是豎屏，一般在醫院、學校中才能見到，暫且不談。
排名第二的是1920×1080，佔比13.07%。
1366×768排第三，佔比6.32%。這說明現在主流的電腦解析度是1920×1080。
排名第七的解析度，1024×768，是最小的電腦尺寸了，僅佔3.13%，很少有人使用。在做pc端的網頁設計時，不用考慮這個尺寸，而應在做pad端和手機端的適配時，將其納入考慮。
而更高級的響應式網站應該是在嚴格的柵格規范下，適應於不同寬度，確保各寬度下的展示效果。但這樣的成本也會相應增加，在開發網站時，需綜合考慮實際需求和開發成本。time（《時代周刊》官網）是個很好的響應式網頁案例。
(8)網站怎麼適配各種尺寸的電腦擴展閱讀
網頁設計中的注意事項：
1、網頁設計的尺寸標准：
面向1024-768顯示器解析度開發的網頁尺寸，寬910px；
面向800-600顯示器解析度開發的網頁尺寸，寬778px；
2、網頁設計中的畫布設定：
尤其注意解析度為72 像素/英寸。
3、設計中的網頁字體問題
中文字體：尤其注意「設置消除鋸齒的方法」選項要選擇「無」。
宋體是最常用的網頁字體，12px 是中文操作系統可以表現的最小的字體，內容。
文字大小一-般用兩種，12px 或14px(現在的新的vista據說能表現10px的中文字，但現在使用並不多)。
英文字體：其中英文字體最小表現為10px 字verdana字體是大多數網頁使用的英文字體，比起arial字體更美觀和均衡。
效果圖：
網頁效果圖中的網頁字體，雖然在最後製作網頁的過程中不需要裁剪。但做為設計中不可分割的重要元素，一定要認真使用，因為你不單要設計文字與整體網頁的關系，還要設計字體的樣式表顏色。
『玖』 如何讓網頁自動適應顯示器不同的「解析度」
這里以魅族瀏覽器為例，其中的具體步驟如下：
1、手機打開瀏覽器之後，在中間位置點擊【三】。