个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
25
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Flexible.js可伸缩布局实现方法详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
阿里团队开源的一个库。flexible.js，主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题.
实现方法:
通过JS来调整html的字体大小，而在页面中的制作稿则统一使用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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
;(
function
(win, lib) {
var
doc = win.document;
var
docEl = doc.documentElement;
var
metaEl = doc.querySelector(
'meta[name="viewport"]'
);
var
flexibleEl = doc.querySelector(
'meta[name="flexible"]'
);
var
dpr = 0;
var
scale = 0;
var
tid;
var
flexible = lib.flexible || (lib.flexible = {});
if
(metaEl) {
console.warn(
'将根据已有的meta标签来设置缩放比例'
);
var
match = metaEl.getAttribute(
'content'
).match(/initial\-scale=([\d\.]+)/);
if
(match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
}
else
if
(flexibleEl) {
var
content = flexibleEl.getAttribute(
'content'
);
if
(content) {
var
initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var
maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if
(initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if
(maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if
(!dpr && !scale) {
var
isAndroid = win.navigator.appVersion.match(/android/gi);
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;
}
docEl.setAttribute(
'data-dpr'
, dpr);
if
(!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);
}
}
function
refreshRem(){
var
width = docEl.getBoundingClientRect().width;
if
(width / dpr > 540) {
width = 540 * dpr;
}
var
rem = width / 10;
docEl.style.fontSize = rem +
'px'
;
flexible.rem = win.rem = rem;
}
win.addEventListener(
'resize'
,
function
() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
},
false
);
win.addEventListener(
'pageshow'
,
function
(e) {
if
(e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
},
false
);
if
(doc.readyState ===
'complete'
) {
doc.body.style.fontSize = 12 * dpr +
'px'
;
}
else
{
doc.addEventListener(
'DOMContentLoaded'
,
function
(e) {
doc.body.style.fontSize = 12 * dpr +
'px'
;
},
false
);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px =
function
(d) {
var
val = parseFloat(d) *
this
.rem;
if
(
typeof
d ===
'string'
&& d.match(/rem$/)) {
val +=
'px'
;
}
return
val;
}
flexible.px2rem =
function
(d) {
var
val = parseFloat(d) /
this
.rem;
if
(
typeof
d ===
'string'
&& d.match(/px$/)) {
val +=
'rem'
;
}
return
val;
}
})(window, window[
'lib'
] || (window[
'lib'
] = {}));
|
从上面的代码，主要是改变了dpx和document的font-size大小。大小为docEl.getBoundingClientRect().width / 10 + 'px',
假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px.(1rem相对于根节点的字体大小).
假如一个元素的宽是160px,在平时，我们可以采用百分比可以做到自适应，假如使用响应式的话，可能需要设置多个，比如在320px，输出80px，而在640px输出160px等。而采用以上的方法，则只需要输出2.5rem就能实现统一，如下表格:
。
| 设备宽度 | 320px | 360px | 414px | 640px |
| Html字体大小 | 32px | 36px | 41.4px | 64px |
| 实际输出 | 1rem | 1rem | 1rem | 1rem |
| 设计稿缩放大小 | 80px | 90px | 103.5px | 160px |
| 实际输出 | 2.5rem | 2.5rem | 2.5rem | 2.5rem |
。
以上的2.5rem是怎么得出的呢?
160/64（1rem的基数为64px）=2.5rem;按照官方的说法（750px举例） 。
Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出:
1a = 7.5px 1rem = 75px 。
那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，<html>对应的font-size为75px:
这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem.
另外在使用这个来处理自适应的另一个坑就是css sprite，作者的建议是使用svg，或者icon font.或者base64等其他方案.
另外就是在dpr=2时，小图片可能会出现模糊，建议以最大的图片来切图.
字体建议使用px 。
在作者的观点中，是建议描述性的字体使用px，如果有slogan之类大于48px的，可以使用rem，由于使用rem在iPhone5和iPhone6中字体不同，可能出现13px和15px,点阵字体.
显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸.
如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小.
|
1
2
3
4
5
6
7
8
9
10
11
|
div {
width
:
1
rem;
height
:
0.4
rem;
font-size
:
12px
; // 默认写上dpr为
1
的fontSize
}
[data-dpr=
"2"
] div {
font-size
:
24px
;
}
[data-dpr=
"3"
] div {
font-size
:
36px
;
}
|
为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏:
|
1
2
3
4
5
6
7
8
9
10
11
|
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr=
"2"
] & {
font-size: $font-size * 2;
}
[data-dpr=
"3"
] & {
font-size: $font-size * 3;
}
}
|
有了这样的混合宏之后，在开发中可以直接这样使用:
@include font-dpr(16px),
当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用rem给slogan做计量单位.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.
原文链接：https://www.cnblogs.com/doseoer/p/5412282.html 。
最后此篇关于Flexible.js可伸缩布局实现方法详解的文章就讲到这里了,如果你想了解更多关于Flexible.js可伸缩布局实现方法详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
25
4
0
我是一名优秀的程序员,十分优秀！