0.0.6 • Published 2 years ago
fancy-lib-flexible v0.0.6
fancy-lib-flexible
基于lib-flexible修改,根据html标签的宽度、window.devicePixelRatio等自动设定html标签的font-size及data-dpr属性。
安装
npm install fancy-lib-flexible -S
yarn add fancy-lib-flexible -S
引入
import 'fancy-lib-flexible'
window.lib.flexible.setMaxWidth(666) // 默认值为768(ipad宽度),可自定义设备最大宽度,无特殊需要时可不写。
用法
1、全局变量
window.lib ==> {
flexible:{
dpr: 3, // 当前设备像素比
rem: 37.5, // 当前rem值
/**
* 更新html fontSize,更新当前rem值
*/
refreshRem: function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > maxWidth) {
width = maxWidth;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
},
/**
* 将指定px值转为对应rem
* @param {number} d px值
* @return {string} 对应rem,带单位rem
*/
px2rem: function (d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
},
/**
* 将指定rem值转为对应px
* @param {number} d rem值
* @return {string} 对应px,带单位px
*/
rem2px: function (d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
},
/**
* 设置最大逻辑像素宽度限定值,默认值为768。
* @param {number} width 宽度值
* @return {undefined}
*/
setMaxWidth: function (width) {
if (isNaN(width)) {
throw new Error("function setMaxWidth`s param is invalid!")
}
maxWidth = width
refreshRem();
}
}
}
2、结合html标签data-dpr属性加载不同的图片
.btn-android {
background-image: url("../img/@2x/android.png?v=@@version");
[data-dpr="3"] {
background-image: url("../img/@3x/android.png?v=@@version");
}
}
0.0.6
2 years ago