问题一,分辨率Resolution适配:
不同屏幕宽度,html元素宽高比和字体大小,元素之间的距离自适应,使用rem单位。

问题二,单位英寸像素数PPI适配:
使用rem单位,文字会发虚。段落文字,使用px单位,用media query或js来适配。标题文字可以直接使用rem单位。

问题三,设备像素比例DPR适配:
1物理像素在
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale

参考:
http://www.html-js.com/article/2402
http://isux.tencent.com/web-app-rem.html

https://github.com/amfe/lib.flexible

demo如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>移动h5自适应布局</title>
<style>
/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem;/*实际相当于14px*/}
body{
padding:0;
margin:0;
}
.div2{
font-size:0.14rem;
}
.div3{
width:3rem;
height:3rem; border:1px solid #000;
box-sizing:border-box;
}
.div4{
margin-top:0.1rem;
width:2rem;
height:2rem; border:1px solid #000;
box-sizing:border-box;
}
.img1{
width:3.2rem;
}
</style>
</head>
<body>
<div class="div2">动态更改html元素大小</div>
<div class="div3"></div>
<div class="div4"></div>
<img class="img1" src="http://www.baidu.com/img/bdlogo.png" alt="" />
</body>
<script>
// 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
(function (doc, win) {
// 分辨率Resolution适配
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
}; // Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
(function(){
return;
var dpr = scale =1;
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr; //
var metaEl = "";
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
})(); })(document, window);
</script>
</html>

移动h5自适应布局的更多相关文章

  1. H5自适应屏幕分辨率大小

    说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...

  2. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  3. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  4. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  5. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  6. css实现九宫格图片自适应布局

    我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代 ...

  7. 再谈布局,栅栏式自适应布局的学习和实现(calc自适应布局)

    布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...

  8. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  9. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

随机推荐

  1. 161028、Nginx负载均衡实现tomcat集群方案简要小结

    重点两部分:一.负载均衡二.tomcat集群 所谓tomcat集群,就是可以向外提供并行服务的多台机器,任何一台服务器宕机,其它服务器可以替代它向外提供服务,而不影响用户访问. Nginx是一个常用的 ...

  2. unicode转码,如:\u6d4b\u8bd5转成中文“测试”

    public static void main(String[] args) { String s = "测试"; String tt = gbEncoding(s); // St ...

  3. HDU-1042 N!

    首先明白这是大数问题,大数问题大多采用数组来实现.如何进位.求余等.比如1047 (Integer Inquiry): 对于1042问题 计算10000以内数的阶乘,因为10000的阶乘达到35660 ...

  4. Watch The Movie

    Watch The Movie Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Tot ...

  5. git status message - Your branch is ahead of origin/master by X commits

    git reset --hard origin/master git status FAQ: When I issue the "git status" command, I se ...

  6. 造字工房情书体MFQingShu_Noncommercial-Regular

    造字工房情书体由造字工房字体设计师成瑜历时半年书写完成,其字形俊秀.遒劲有力,优雅中透出知性的气息.文从字顺,字形笔画柔美俊秀.刚柔并济,结构自然洒脱,充满活力朝气的青春气息,完美呈现了手写汉字之美, ...

  7. 制作动画平滑过渡效果:《CSS3 Transition》

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  8. jquery简单插件到复杂插件(1)--tabs

    写在前面,到了新公司开始转做前段,之前一直写php,一共写了半年,转过来,jq都用不好,但是还是得不断的学习,谁没菜过.从最简单的开始写,最近也在学习些html5的小游戏,加油吧.js原生写的可以说惨 ...

  9. SQL 中ROLLUP 用法

    SQL 中ROLLUP 用法 ROLLUP 运算符生成的结果集类似于 CUBE 运算符生成的结果集. 下面是 CUBE 和 ROLLUP 之间的具体区别: CUBE 生成的结果集显示了所选列中值的所有 ...

  10. flume ng之组件介绍

    1.channel 2.source 3.sink 4.直接读取文件Source,有哪两种方式? 5.Channel有几种方式? 6.Sink在设置存储数据时,数据较多,较少的情况下,该如何处理? F ...