前端页面最佳适配方案px转rem(野草蛮生)

1. 安装lib-flexible

npm i lib-flexible --save

2. 在main.js里引入lib-flexible

import 'lib-flexible/flexible.js'

3.然后在node_modules文件夹下找到lib-flexible文件夹下的flexible.js

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; } 把上面的函数注释掉换成下面这个函数 function refreshRem() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + 'px' }

4.在APP.vue中加入如下代码(这是适配的屏幕尺寸,根据项目需求手动更改)

@media screen and (max-width: 1024px) {html {font-size: 42.66px!important;注释: 1024/24可得} } @media screen and (min-width: 2560px) {html {font-size: 106.66px!important;注释: 2560/24可得} }

5.安装插件把页面写的px转换成rem

6.最后找到设置中的扩展设置把font-size改为80即可

 

总结

以上是生活随笔为你收集整理的前端页面最佳适配方案px转rem(野草蛮生)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。