(详解)关于lib-flexible 适配pc端 移动端

简介: (详解)关于lib-flexible 适配pc端 移动端

1.安装


npm install lib-flexible


2.修改配置文件


修改里面的flexible.js 文件里面的refreshRem()函数就可以


(flexible.js在安装好的node_modules/lib-flexible/flexible.js)


function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 2560) { //大于2560px以后的宽度      修改地方1!!!
       width = 2560 * dpr;
    } else if (width / dpr < 900) { //小于900px以后的宽度 修改地方2!!!
       width = 900 * dpr;
    }
    var rem = width / 24;           //将屏幕分成多少分    修改地方3!!!
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

3.引入


在main.js文件里面引入


import 'lib-flexible/flexible'

到这里lib-flexible已经完毕


目录
相关文章
|
前端开发 应用服务中间件 网络安全
【Nuxt】Nuxt做官网要求适配PC&Mobile,我的解决方案
前言 项目终于进入了尾声,这段时间主要在忙公司官网的开发,前段时间我在忙另外一个项目的时候,官网这个项目就启动了,团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网,导致我很难李姐,所以我提出重构项目,由我主导开发,写篇文章记录一下项目信息以及部分关键点。
1832 0
|
5月前
|
资源调度 前端开发
移动端方案 postcss-mobile-forever
【8月更文挑战第14天】
|
iOS开发
移动端iPhone系列适配问题的一些坑
移动端iPhone系列适配问题的一些坑
119 0
|
前端开发
【前端】移动端适配方案-rem
【前端】移动端适配方案-rem
159 0
|
移动开发 前端开发
|
前端开发 Android开发
vue-cli 项目配置 lib-flexible【阿里手淘移动端自适应解决方案】
vue-cli 项目配置 lib-flexible【阿里手淘移动端自适应解决方案】
vue-cli 项目配置 lib-flexible【阿里手淘移动端自适应解决方案】
|
移动开发 前端开发 JavaScript
使用Flexible实现手淘H5页面的终端适配
使用Flexible实现手淘H5页面的终端适配
437 0
使用Flexible实现手淘H5页面的终端适配
|
JavaScript
PC端和移动端如何实现字体适配
PC端和移动端如何实现字体适配
807 0
|
JavaScript iOS开发
Vue适配PC+大屏,手机+ipad适配
Vue适配PC+大屏,手机+ipad适配
1428 0
Vue适配PC+大屏,手机+ipad适配