个人中心
文章发布
退出
作者热门文章
- 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
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之，我想将我的应用程序实现为单独的层，其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
当我看到存储在我的数据库中的日期时。 这是 正常 。日期和时间就是这样。 但是当我运行 get 请求来获取数据时。 此格式与存储在数据库 中的格式不同。为什么会发生这种情况？ 最佳答案 我认为您可以将
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在尝试使用backbone.js 实现一些代码 和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序，并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我尝试在 NodeJS 中加载数据，然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。 我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
在 node.js 中，我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时，会创建一个 app.js 文件作为生成应用的主要入口点。 通过 n
最近，我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。 我更喜欢客户端。在他的实现过程中，papa先生在客户端有类
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我是一个图形新手，需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么，而我没有从 Konva 等基于 Canvas 的库中得到什么？ 我从 Konva
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
尝试查看 Express Passport 中所有登录用户的所有 session ，并希望能够查看当前登录的用户。最好和最快的方法是什么？ 我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
我有一个 React 应用程序，但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载，运行与 DOM 交互的 js 的最佳方式是什么，例如 $('div').mixItUp() 。对
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器 客户端 // ... onFilePicked(file) { const url = 'upload/a
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好，所以我一定是在 Gulp 中做错了什么。 除脚本外，所有其他任务均有效。我现在厌倦了添加和注释部分。 我不断收到与意外
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。 最佳答案 您可以在 config/ 目录中创建任何文件，例如 config/app.js 包含如下内容: module.expor
经过多年的服务器端 PHP/MySQL 开发，我正在尝试探索用于构建现代 Web 应用程序的新技术。 我正在尝试对所有 JavaScript 内容进行排序，如果我理解得很好，一个有效的解决方案可以是服
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
我正在使用 angular-seed用于构建我的应用程序的模板。最初，我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和
我是一名优秀的程序员,十分优秀！