MC-SCALE
scale 内核的自适应解决方案,这个方案在一些特殊场景下使用。在大多数场景下建议使用 https://www.npmjs.com/package/@fekit/mc-ratio
索引
演示
安装
npm i @fekit/mc-scale
参数
{
el : 'id', {DomObject} 要缩放的DOM对象
size : [750, 1334], {Number} 设计稿的尺寸
full : true | false, {Boolean} 是否开启全屏模式?如果开启开屏模式则对宽度和高度双向自适应 *
fixed: 2 {Number} 设置字号精度为小数点后2,一般建议为2位
max : 750 {Number} 最大尺寸,超过这个尺寸不再放大
min : 320 {Number} 最小尺寸,超过这个尺寸不再缩小
then : function () {} {Function} 自适应字号改变时的回调
}
示例
基础自适应:
scale({
el: document.getElementId('area'),
size: [750, 1334] // 设计稿的尺寸
});
双向自适应:
scale({
el: document.getElementId('area'),
size: [750, 1334], // 设计稿的尺寸
full: true, // 开启全屏模式,将对宽度和高度双向自适应缩放,这种模式一般用于无滚动条的全屏页面。
fixed: 2 // 设置字号精度为小数点后2位
});
限制最大尺寸:
scale({
el: document.getElementId('area'),
size: [750, 1334], // 设计稿的尺寸
full: true, // 开启全屏模式,将对宽度和高度双向自适应缩放,这种模式一般用于无滚动条的全屏页面。
max: 750 // 超过750的尺寸不再放大
});
局部自适应
// 以下示例仅对指定ID为area的元素做自适应,需要注意的是,如果你仅对网页中的部分区域做自适应,请勿开启dpr功能,该功能将影响全局网页
scale({
el: document.getElementId('area'), // 为ID为area的标签设置自适应字号,当字号不是设置在HTML根标签时,只能在区域内用em方案自适应
size: [750, 1334], // 设计稿的尺寸
fixed: 2
});
版本
v1.0.5 [Latest version]
1、非功能性升级
v1.0.4
1、非功能性升级
v1.0.3
1、添加min和max属性,大于或小于某个值后不再缩放
v1.0.0
1、由@fekit/mc-ratio修改而成。继承了@fekit/mc-ratio的所有入参及功能