网站推广方案策划书,vitality 中文原创wordpress主题,如何制作自己的网站 可放广告,wordpress 增加 导航栏现在非常流行的大数据可视化方案#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 这样我们在写的时候就会自动计算比例
