vue 实现自适应屏幕
vue 实现自适应屏幕
·
1.安装自适应屏幕插件(优先使用vscode安装,需要调整px转化rem比例)
(1)安装插件:
npm i lib-flexible --save
(2)mian.js引入:
import 'lib-flexible/flexible.js'
2. 如果出现跑板现象,在node_modules文件夹中找到lib-flexible下面的flexible.js文件。
(1)找到下列代码注释掉:
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }(2)添加一句新的代码:
function refreshRem() { var rem = docEl.clientWidth / 24; docEl.style.fontSize = rem + 'px' }
3. 在app.vue中的style中加入。
@media screen and (max-width: 1024px) { html { font-size: 42.66px!important; } } @media screen and (min-width: 2560px) { font-size: 106.66px!important; } }
4.找到vscode安装插件的位置。
第二步中修改为80即可。
这样就实现了项目自适应屏幕的效果。
更多推荐
已为社区贡献1条内容
所有评论(0)