html如何适应手机？

有几种，利用meta标签、百分比法、使用CSS3单位rem、媒体查询。

利用meta标签

Meta标签主要用来描述一个HTML网页文档的属性，如作者、日期时间、网页描述、关键词、页面刷新等，它的Description和Keywords属性，可加入网站的关键字，让网页利于搜索引擎。

<meta name="viewport" content="width=device-width,initial-scale=10, minimum-scale=10, maximum-scale=10, user-scalable=no"/>

解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。

以上标签只支持一种尺寸，正确的做法是用js动态生成下面标签，前提是要先获取屏幕尺寸。

<script type="text/javascript">

var phoneWidth =  parseInt(windowscreenwidth);

var phoneScale = phoneWidth/640;

var ua = navigatoruserAgent;

if (/Android (d+d+)/test(ua)){var version = parseFloat(RegExp$1);

if(version>23){ documentwrite(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{documentwrite(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { documentwrite(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

百分比法

CSS中的百分比中指的是相对于父元素的宽度。子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了。但这只适合布局简单的页面，复杂的页面实现很困难。

使用CSS3单位rem

在页面载入开始时首先判断window的宽度（是window的宽度($(window)width())，不是屏幕分辩率的宽度（screenwidth），两者差别请自行查阅），假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，如果html的font-size为100px，那么这个div的宽度用rem表示是多少呢？

计算：div宽度dW2=dW1/100,px与rem之间换算除以100就可以，这是假定屏幕宽度为640的，而不同宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算：100 / 640 = fontSize / W, fontSize = W / 640 100 = W / 64。大多数浏览器font-size的最小值为12px，所以只能用100作为缩放比例。

所以会在头部加上这个JS代码：

<script type="text/javascript">

var html = documentquerySelector(‘html‘);

var rem = htmloffsetWidth / 64;

htmlstylefontSize = rem + "px";

媒体查询

媒体查询正是为解决网页适应手机屏幕。媒体查询的功能就是为不同的“媒体”设置不同的css样式，页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) {icon{ some styles }};具体可自行研究。

刚刚过去的一年里基于微信的H5营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个“摇签”的小例子来谈一谈HTML5中如何调用手机重力感应的接口。

演示代码：摇一摇，万福签

什么是重力感应

说到重力感应有一个东西不得不提，那就是就是陀螺仪，陀螺仪就是内部有一个陀螺，陀螺仪一旦开始旋转，由于轮子的角动量，陀螺仪有抗拒方向改变的特性，它的轴由于陀螺效应始终与初始方向平行，这样就可以通过与初始方向的偏差计算出实际方向。

手机中的方位轴

在Web应用中调用手机陀螺仪接口

//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)

//测试中发现有些设备不支持

if(windowDeviceOrientationEvent){

$(window)on('deviceorientation', function(e) {

if (isStarted) {

return true;

}

if (!lastAcc) {

lastAcc = e;

return true;

}

var delA = Mathabs(ealpha - lastAccalpha);

var delB = Mathabs(ebeta - lastAccbeta);

var delG = Mathabs(egamma - lastAccgamma);

if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {

start();

}

lastAcc = e;

});

//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)

if(windowDeviceMotionEvent) {

var speed = 25;

var x, y, z, lastX, lastY, lastZ;

x = y = z = lastX = lastY = lastZ = 0;

windowaddEventListener('devicemotion', function(event){

var acceleration = eventaccelerationIncludingGravity;

x = accelerationx;

y = accelerationy;

if(Mathabs(x-lastX) > speed || Mathabs(y-lastY) > speed) {

start();

}

lastX = x;

lastY = y;

}, false);

}

摇一摇的代码判断逻辑

var isStarted = false;

// 开始摇签

function start() {

isStarted = true;

$('qiancover')hide();

$('decode')hide();

$('result')show();

// setTimeout(showDecode, 3000);

}

// 显示正在解签

function showDecode() {

$('result')hide();

$('decode')show();

setTimeout(jumpToDecode, 3000);

}

// 跳至签文页面

function jumpToDecode(){

var urls = ["#", "#"];

var jumpTo = urls[parseInt(Mathrandom() urlslength)];

windowlocation = jumpTo;

};

示例代码： https://githubcom/lionrock/HTML5-Example/tree/master/wechat-divination

参考文档： DeviceOrientation Event Specification

来源：http://xunlixyz/2016/01/12/html5-device-shake/utm_source=tuicool&utm_medium=referral

1、首先准备一个HTML结构的文档，页面可以制作的简单点。

2、然后在页面的body区域中放置一个img。

3、我们先来运行一下页面，你会在页面中看到如下图所示的圆圈。

4、接下来我们就需要对页面进行CSS处理，如下图所示，给img添加样式，注意里面有旋转样式。

5、然后实现旋转的设置，这个是CSS3的新功能，主要是对进行旋转度数的设置。

6、最后运行程序，你会看到页面中的圆圈在不停的旋转，和我们平常看到的加载中的效果很像。