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样式就好了，你可以去了解一下响应式网站的相关知识