(详解)关于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已经完毕


目录
相关文章
|
JSON JavaScript 前端开发
iOS小技能: 开发 uni-app 原生插件(支持iOS Extension)
术语:uni原生插件指的是将`原生开发的功能按照规范封装成插件包`,然后即可在 uni-app 前端项目中通过js调用原生能力。
1129 0
iOS小技能: 开发 uni-app 原生插件(支持iOS Extension)
|
前端开发 应用服务中间件 网络安全
【Nuxt】Nuxt做官网要求适配PC&Mobile,我的解决方案
前言 项目终于进入了尾声,这段时间主要在忙公司官网的开发,前段时间我在忙另外一个项目的时候,官网这个项目就启动了,团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网,导致我很难李姐,所以我提出重构项目,由我主导开发,写篇文章记录一下项目信息以及部分关键点。
1768 0
|
JSON iOS开发 开发者
uniapp配置ios的Universal Link和associate domains
uniapp配置ios的Universal Link和associate domains
|
1月前
|
安全 网络安全 Android开发
深度解析:利用Universal Links与Android App Links实现无缝网页至应用跳转的安全考量
【10月更文挑战第2天】在移动互联网时代,用户经常需要从网页无缝跳转到移动应用中。这种跳转不仅需要提供流畅的用户体验,还要确保安全性。本文将深入探讨如何利用Universal Links(仅限于iOS)和Android App Links技术实现这一目标,并分析其安全性。
224 0
|
3月前
|
资源调度 前端开发
|
6月前
|
编解码 搜索推荐 Android开发
Flutter笔记:发布一个模块 scale_design - (移动端)设计师尺寸适配工具
Flutter笔记:发布一个模块 scale_design - (移动端)设计师尺寸适配工具
114 0
|
移动开发 前端开发
|
移动开发 前端开发 JavaScript
使用Flexible实现手淘H5页面的终端适配
使用Flexible实现手淘H5页面的终端适配
420 0
使用Flexible实现手淘H5页面的终端适配
|
JavaScript
PC端和移动端如何实现字体适配
PC端和移动端如何实现字体适配
784 0