移动H5自适应布局

  WebApp开发:随着WebApp的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我认为rem是用来做WebApp它绝对是最合适的人选之一。

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。
em(font size of the element)是指相对于父元素的字体大小的单位。

区别:它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

设置viewport进行缩放

设备适配

Boss直聘BossZ

类似百度的自适应跳转,但是将font-size限制在40px之内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function(doc,win){
var docEl = doc.documentElement,
recalc = function(){
var clientWidth = docEl.clientWidth;
if(!clientWidth){return}
var w = 20 * (clientWidth / 320);
if(w > 40){
w = 40;
}

docEl.style.fontSize = w + "px";
};

if(!doc.addEventListener){return}
if("orientationchange" in window){
win.addEventListener("orientationchange",recalc,false)
}

win.addEventListener("resize",recalc,false);
win.addEventListener("load",recalc,false);
doc.addEventListener("DOMContentLoaded",recalc,false);
recalc();
})
(document,window);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
PPi 320px HMTL
font-size:20px

4.5rem = 90px

.kz_dflex{
display: -webkit-flex;

display: -ms-flexbox;
display: -webkit-box;
display: -moz-box;
display: flex;
}
.kz_flex{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

百度Bwmai

1
2
3
4
5
6
7
8
9
10
11
12
(function(doc,win){
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);

五谷Honey

网上一个朋友公司的自适应效果,font-size效果太局限了。zepto.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
$(window).resize(infinite);
function infinite() {
var htmlWidth = $('html').width();
if (htmlWidth >= 1080) {
$("html").css({
"font-size" : "42px"
});
} else {
$("html").css({
"font-size" : 42 / 1080 * htmlWidth + "px"
});
}
}
infinite();
});

Js-Rem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
console.time("test");
/*
# 按照宽高比例设定html字体, width=device-width initial-scale=1版
# @pargam win 窗口window对象
# @pargam option{
designWidth: 设计稿宽度,必须
designHeight: 设计稿高度,不传的话则比例按照宽度来计算,可选
designFontSize: 设计稿宽高下用于计算的字体大小,默认20,可选
callback: 字体计算之后的回调函数,可选
}
# return Boolean;
# xiaoweili@tencent.com
# ps:请尽量第一时间运行此js计算字体
*/

!function(win, option) {
var count = 0,
designWidth = option.designWidth,
designHeight = option.designHeight || 0,
designFontSize = option.designFontSize || 20,
callback = option.callback || null,
root = document.documentElement,
body = document.body,
rootWidth, newSize, t, self;
root.style.width = 100 + "%";
//返回root元素字体计算结果
function _getNewFontSize() {
var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
return parseInt( scale * 10000 * designFontSize ) / 10000;
}
!function () {
rootWidth = root.getBoundingClientRect().width;
self = self ? self : arguments.callee;
//如果此时屏幕宽度不准确,就尝试再次获取分辨率,只尝试20次,否则使用win.innerWidth计算
if( rootWidth !== win.innerWidth && count < 20 ) {
win.setTimeout(function () {
count++;
self();
}, 0);
} else {
newSize = _getNewFontSize();
//如果css已经兼容当前分辨率就不管了
if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) {
root.style.fontSize = newSize + "px";
return callback && callback(newSize);
};
};
}();
//横竖屏切换的时候改变fontSize,根据需要选择使用
win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
clearTimeout(t);
t = setTimeout(function () {
self();
}, 300);
}, false);
}(window, {
designWidth: 640,
designHeight: 1136,
designFontSize: 20,
callback: function (argument) {
console.timeEnd("test")
}
});

IMax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(win){
var userAgent = navigator.userAgent.toLowerCase();
var isPhone=userAgent.indexOf('android') !== -1 || userAgent.indexOf('iphone') !== -1 ||userAgent.indexOf('ipod') !== -1 || userAgent.indexOf('symbian') !== -1 || (userAgent.indexOf('micromessenger') !== -1)
var doc = win.document,
html = doc.documentElement;
var baseWidth = 720,
grids = baseWidth / 100,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = html.clientWidth || 320;
if(!isPhone){
if(clientWidth > 360){clientWidth = 360};
}else{
if(clientWidth > 500){clientWidth = 500};
}

html.style.fontSize = clientWidth / grids + 'px';
};

if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded',function(){
setTimeout(recalc)
}, false)
;

})
(window);

移动h5自适应布局
HTML5移动端手机网站开发流程
WebApp开发之–”rem”单位
web app变革之rem
IMax
IMax
IMax
IMax

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. rem是什么?
  2. 2. 设备适配
    1. 2.1. Boss直聘BossZ
    2. 2.2. 百度Bwmai
    3. 2.3. 五谷Honey
    4. 2.4. Js-Rem
    5. 2.5. IMax
,