flexible.js使用教程

flexible.js使用教程

flexible.js是一个用来适配移动端的javascript框架。根据宽度的不同设置不同的字体大小，样式间距都使用rem作为单位，不同屏幕大小适配不同的样式。下面简单的介绍下如何使用flexible.js

首先贴下示例代码

打开谷歌浏览器，测试页面在浏览器中打开，同时F12打开网页调试工具，将设备像素比设置为1，刷新页面，显示如下图效果，flexible对字体大小的设置，使用data-dpr属性来区分在不同dpr下显示不同的字体大小

将设备像素比设置为2，刷新页面，查看效果，字体大小变为56px了

将设备像素比设置为3，刷新页面，再次查看效果，字体大小变为156px了

下面再来介绍下flexible.js常用的类库方率册法，获取当前页面的dpr值、rem基准值

添加完成之后，刷新页面，控制台打印出来的值如下图所示，还可以修改设备像素比之后，再刷新查看值的变化

rem与px之间的转换

//把rem转换为px

console.log(lib.flexible.rem2px(["3rem"]));

//也可以不带rem直接为数值

console.log(lib.flexible.rem2px());

//把px转换为rem

console.log(lib.flexible.px2rem(["156px"]));

//也可以不带px，直接为哄珠排欧敏数值

console.log(lib.flexible.px2rem());