企业网站开发标准,什么网站框架,网站建设要素,东莞公司网站建设营销型网站建设现在非常流行的大数据可视化方案#xff0c;不过要做数据大屏有一个很重要的问题就是屏幕适配。 vue项目使用flexible.js和rem适配 vue中使用flexible.js实现屏幕自适应
一、引入flexible文件 flexible是移动端屏幕适配非常著名的的插件#xff0c;能够帮助我们修改rem的值不过要做数据大屏有一个很重要的问题就是屏幕适配。 vue项目使用flexible.js和rem适配 vue中使用flexible.js实现屏幕自适应
一、引入flexible文件 flexible是移动端屏幕适配非常著名的的插件能够帮助我们修改rem的值也就是修改html标签下font-size的值。 例下载flexible.js文件并放在common目录下然后在vue-cli中的main.js主配置文件中引入
// 适配flex文件放在src/common目录下
import /common/flexible.js;二、 修改文件 假设我的模板是按照1920px的尺寸来写的那么我们首先需要去flexible.js文件下修改它所缩放的尺寸间距如 最小1366px最大适配2560px并且比例设置成24等份设计稿是1920px这样1rem就是80px。
function refreshRem() {var width docEl.getBoundingClientRect().width;// 最小1366px最大适配2560pxif (width / dpr 1366) {width 1366 * dpr;} else if (width / dpr 2560) {width 2560 * dpr;}// 设置成24等份设计稿时1920px的这样1rem就是80pxvar rem width / 24;docEl.style.fontSize rem px;flexible.rem win.rem rem;}三、 借助插件自动计算rem
以vscode为例 设置比例前面说了我们按照1920px切成了24份那么一份就是80px 这样我们在写的时候就会自动计算比例
