html5適配
一、"自適應網頁設計"的概念
2010年，Ethan Marcotte提出了"自適應網頁設計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。
自適應網頁設計"到底是怎麼做到的？其實並不難。
首先，在網頁代碼的頭部，加入一行viewport元標簽。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
三、不使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說，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文件。
<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文件。
除了用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.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不過，有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。
『貳』 html5移動端適配是什麼意思
意思是說多屏幕自適應
『叄』 html5屏幕適配 APP怎麼做
第1部分：
基本的屏幕適配知識：
1、屏幕大小
在Android系統中，把屏幕大小分為以下4種：small、normal（標准）、large、
extra large（引申為更大的屏幕）。
2、屏幕密度
在Android系統中，屏幕密度指的是在指定的屏幕大小區域內，有多少個像素。基本單位為dpi（點/每英寸）。
基本包括4種密度：low、dedium(中等)、high、extra high（引申為更高的密度）。
常見的屏幕密度如下：QVGA(240x320)、HVGA(320x480)、WVGA800（480x800）
第2部分：
Android官方的解決方案：
從Android1.6版系統起，res文件夾下面的drawable文件夾由原來的1個變為了3個。
如下圖所示：
這三個文件夾分別用來存放高密度、中等密度和低密度的圖片。
具體的適配方法，用一個案例來說明。
例如：
創建一個工程：test_demo_01
在3個drawable文件夾下面分別放置高密度、中等密度和低密度的圖片。
然後在AndroidMainfest.xml中添加如下內容：
此外需要注意的是：
1、圖片布局的基本單位應該是dip。
2、不要使用絕對布局（AbsoluteLayout）。
以下是3種屏幕的自適應結果
『肆』 html5頁面怎麼適應個手機的尺寸
你好，可以來參考bootstraphttp://v3.bootcss.com/css/#grid
/*超小屏源幕（手機，小於768px）*/
/*沒有任何媒體查詢相關的代碼，因為這在Bootstrap中是默認的（還記得Bootstrap是移動設備優先的嗎？）*/
/*小屏幕（平板，大於等於768px）*/
@media(min-width:@screen-sm-min){...}
/*中等屏幕（桌面顯示器，大於等於992px）*/
@media(min-width:@screen-md-min){...}
/*大屏幕（大桌面顯示器，大於等於1200px）*/
@media(min-width:@screen-lg-min){...}
希望可以幫助到你
『伍』 html5移動端適配華為手機問題
這個比較難兼容因為華為的手機規格很獨特，如果隨意改了的話可能會不適應其他手機，H5 想做到無縫響應式的話 也可以試試某些 製作H5工具的支持 比如 epub360 。
『陸』 html怎麼適配html5 小米 max2 的高
推薦你使用rem的單位來適配高度。
rem，應該說讓各個開發者眼前一亮，rem雖然也是和字體相關的相對度量單位，但是，它要比em使用起來更方便，rem是相對於根元素的字體大小進行設置的，如果html元素中的字體大小設置為24px，那麼針對任意html內的元素設置1rem，均表示的是24px，大大節省了我們計算字體大小的時間。（另外，當rem能夠和JS去配合時，能夠很好的解決移動端的各種像素大小問題——JS獲取設備寬度，然後根據設備寬度調整html元素這個根元素的字體大小，在html元素中的所有元素，均使用rem相對度量單位）
rem的支持程度：IE9及以上所有瀏覽器，安卓2.1以上版本，iOS4.0以及以上版本的safari（換句話說，IE6-8不兼容）
移動端開發知識[系列] - 處理rem的小數點問題 flexible.js
『柒』 如何使用 HTML5 技術適配不同解析度的設備
可以使用自適應
<html>
<head>
<metacharset="UTF-8">
<title>Title</title>
<script>
varpixelRatio=1/window.devicePixelRatio;
document.write("<metaname='viewport'content='width=device-width,initial-scale="+pixelRatio+",user-scale=no,minimum-scale="+pixelRatio+",muximum-scale="+pixelRatio+"'/>")
varhtml=document.getElementsByTagName('html')[0];
varpageWidth=html.getBoundingClientRect().width;
html.style.fontSize=pageWidth/16+'px';
</script>
<!--這裡面的JS，就是用來實現自適應的，使用rem為單位，可使用less來編譯比較快！-->
</head>
<body>
</body>
</html>
『捌』 android開發，html5頁面怎麼適配不同手機解析度
android中不同手機解析度適配問題
在項目開發的過程中，同一個布局對應不同的手機會顯示出不同的效果。導致這個現象產生的原因是不同手機的解析度不同。在android sdk提供的幫助文檔中，我們可以看到各種手機的解析度和對應的屏大小。QVGA (240x320)，WQVGA400(240x400)，WQVGA432 (240x432)，HVGA (320x480)，WVGA800 (480x800)，WVGA854 (480x854)。
目前android手機的解析度大致就是幫助文檔中描述的幾種。我們可以用兩種方式進行不同手機的適配。一種是在java代碼中，另外一種是在xml文件中。具體使用哪種方式更有效更合適，要看具體的情況而定。
在以前的項目中，我之前做過關於歷史聊天記錄，每頁顯示條數的匹配。不同的手機，每頁可以顯示歷史記錄的條數是不同的。我採用的是在java代碼中做匹配。不同解析度的手機，他們都有固定的屏高。例如，480x800，屏高是800。240x320，屏高是320。根據屏高為判定條件，為每一頁顯示歷史記錄的條數做一個限制。我個人覺得，在java代碼中做手機匹配，要看匹配的布局中，控制項是否太多，不太多，可以在java代碼中根據不同的情況修改，否則，java代碼將會顯得很冗長，修改起來也很麻煩。
在xml進行手機匹配，主要是針對布局中控制項太多，不方便在java代碼中修改的情況。在xml中解決不匹配問題很簡單，對於不同手機的解析度，建立對應的layout文件即可。例如：480x800，之間建立layout-800x400,240x320，建立layout-320x240。特別注意：大的寫在前面，例如800,320，小的寫在後面，例如480,240。建立了相應的layout後，還要在不同的手機上調整布局中的控制項大小和位置。
在本次項目中，我負責不同手機視圖的匹配問題，我選擇的是xml匹配方式，結果發現按上面的方式做了之後，對應解析度的手機的顯示沒有任何的效果，後來，我查看幫助文檔後，發現必須要在androidmainfest中進行如下代碼的配置：
<supports-screens
android:smallScreens="true"
android:normalScreens="true"
android:largeScreens="true"
android:xlargeScreens="true"
android:anyDensity="true" />
如果沒有這幾行代碼，不管你怎麼調整layout中的控制項，對應解析度的手機是沒有任何效果的。注意：由於android版本的不同，有些版本不支持xlargeScreens，可以直接將android:xlargeScreens="true"去掉。
來源：
android屏幕解析度適配
1. 多解析度支持
在設計之初，Android系統就被設計為一個可以在多種不同解析度的設備上運行的操作系統。對於應用程序來說，系統平台向它們提供的是一個穩定的，跨平台的運行環境，而關於如何將程序以正確的方式顯示到它所運行的平台上所需要的大部分技術細節，都由系統本身進行了處理，無需程序的干預。當然，系統本身也為程序提供了一系列API，所以在目標平台的解析度是可以完全確定的情況下，程序也可以精確的控制自身在目標平台上的界面顯示方式。
這個文檔會說明系統平台究竟提供了哪些解析度支持特性，與它們如何在程序中使用的信息。如果你遵循文檔中列出的方法，就很容易讓你的程序在所有支持的解析度下都能完美顯示。這樣你就可以用一個單獨的.apk文件，將你的程序發布到所有的平台上。
如果你已經發布過針對Android 1.5或更早版本平台的程序，你應該仔細閱讀這篇文檔，然後考慮一下到底如何讓自己的老程序可以在擁有各種不同解析度，並且運行著Android 1.6或更新平台上正常顯示。在絕大部分情況下，只需要對程序作出小小的修改就可以達到目的，但你仍然需要盡可能地在各種解析度的平台上進行測試。
特別的，如果你有一個已經完成的程序，又想讓它可以在超低解析度的設備（比如320×240）上正確運行，你需要閱讀「老程序的更新策略」，那篇文檔會告訴你應該怎麼做。
2. 術語和概念
屏幕尺寸
屏幕的物理尺寸，以屏幕的對角線長度作為依據（比如2.8寸，3.5寸）。
簡而言之，Android把所有的屏幕尺寸簡化為三大類：大，中，小。
程序可以針對這三種尺寸的屏幕提供三種不同的布局方案，然後系統會負責把你的布局方案以合適的方式渲染到對應的屏幕上。這個過程是不需要程序員用代碼來干預的。
屏幕長寬比
屏幕的物理長度與物理寬度的比例。程序可以為制定長寬比的屏幕提供製定的素材，只需要用系統提供的資源分類符long和notlong。
解析度
屏幕上擁有的像素的總數。注意，雖然大部分情況下解析度都被表示為「寬度×長度」，但解析度並不意味著屏幕長寬比。在Android系統中，程序一般並不直接處理解析度。
密度
以屏幕解析度為基礎，沿屏幕長寬方向排列的像素。
密度較低的屏幕，在長和寬方向都只有比較少的像素，而高密度的屏幕通常則會有很多——甚至會非常非常多——像素排列在同一區域。屏幕的密度是非常重要的，舉個例子，長寬以像素為單位定義的界面元素（比如一個按鈕），在低密度的屏幕上會顯得很大，但在高密度的屏幕上則會顯得很小。
密度無關的像素（DIP）
指一個抽象意義上的像素，程序用它來定義界面元素。它作為一個與實際密度無關的單位，幫助程序員構建一個布局方案（界面元素的寬度，高度，位置）。
一個與密度無關的像素，在邏輯尺寸上，與一個位於像素密度為160DPI的屏幕上的像素是一致的，這也是Android平台所假定的默認顯示設備。在運行的時候，平台會以目標屏幕的密度作為基準，「透明地」處理所有需要的DIP縮放操作。要把密度無關像素轉換為屏幕像素，可以用這樣一個簡單的公式：pixels = dips * (density / 160)。舉個例子，在DPI為240的屏幕上，1個DIP等於1.5個物理像素。我們強烈推薦你用DIP來定義你程序的界面布局，因為這樣可以保證你的UI在各種解析度的屏幕上都可以正常顯示。
支持的屏幕解析度范圍
1.5及更早版本的Android系統，在設計的時候假定系統只會運行在一種解析度的設備上——HVGA（320×480）解析度，尺寸為3.2寸。由於系統只能工作在一種屏幕上，開發人員就可以針對那個屏幕來編寫自己的程序，而無需去考慮程序在其他屏幕上的顯示問題。
但自從Android 1.6以來，系統引入了對多種尺寸、多種解析度屏幕的支持，以此滿足擁有各種配置的新平台的運行需求。這就意味著開發人員在針對Android 1.6或更新版系統開發程序的時候，需要為自己的程序在多種解析度的屏幕上良好顯示作出額外的設計。
為了簡化程序員面在對各種解析度時的困擾，也為了具備各種解析度的平台都可以直接運行這些程序，Android平台將所有的屏幕以密度和解析度為分類方式，各自分成了三類：
·三種主要的尺寸：大，正常，小；
·三種不同的密度：高（hdpi），中（mdpi）和低（ldpi）。
如果需要的話，程序可以為各種尺寸的屏幕提供不同的資源（主要是布局），也可以為各種密度的屏幕提供不同的資源（主要是點陣圖）。除此以外，程序不需要針對屏幕的尺寸或者密度作出任何額外的處理。在執行的時候，平台會根據屏幕本身的尺寸與密度特性，自動載入對應的資源，並把它們從邏輯像素（DIP，用於定義界面布局）轉換成屏幕上的物理像素。
下表列出了Android平台支持的屏幕中一些比較常用的型號，並顯示了系統是如何把它們分類到不同的屏幕配置里的。有些屏幕解析度並不在下面的列表上，但系統仍會把它們歸入下列的某一個類型中。
低密度（120），ldpi
中密度（160），mdpi
高密度（240），hdpi
小屏幕
·QVGA（240×320），2.6～3.0寸
普通屏幕
·WQVGA（240×400），3.2～3.5寸
·FWQVGA（240×432），3.5～3.8寸
·HVGA（320×480），3.0～3.5寸
·WVGA（480×800），3.3～4.0寸
·FWVGA（480×854），3.5～4.0寸
大屏幕
·WVGA（480×800），4.8～5.5寸
·FWVGA（480×854），5.0～5.8寸
如上表所示，所有解析度的屏幕，都圍繞在基準屏幕周圍，而基準屏幕在分類中，為「正常」尺寸，與「中」密度。之所以用HVGA屏幕作為基準屏幕，是因為所有針對Android 1.5或更早的程序都是針對這片屏幕所寫的（因為只支持這一片），比如T-Mobile G1。
雖然系統支持上面9種不同配置的屏幕，但你並不一定需要為它們都提供各自不同的資源。系統已經提供了足夠魯棒（就是在各種惡劣環境下正常工作，對環境變化不敏感）的兼容特性，用於在各種不同的屏幕上良好顯示你的程序。這在下面的文檔中會詳細描述，如果你需要更多的資料，請查看「與屏幕無關的最佳實踐」。
作者「Ant space」
『玖』 如何使用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代碼
『拾』 寫兩套HTML5代碼，是不是PC和移動端都能適配了
html只是一個框架。主要是承載內容，而css才是修飾它的，所以要想同時適配手機端和pc端，那麼你只要寫兩套css樣式就好了，你可以去了解一下響應式網站的相關知識