vue中使用第三方UI库的移动端rem适配方案

raoyi 发布于2019-08-02 10:40 / 1849人阅读

摘要：需求使用脚手架搭建项目，并且使用第三方的库比如，的时候，因为第三方库用的都是用单位，无法使用适配不同设备的屏幕。解决办法使用插件将第三方库的转换成单位。否则会出现混乱页面。

需求：使用vue-cli脚手架搭建项目，并且使用第三方的UI库（比如vant，mint ui）的时候，因为第三方库用的都是用px单位，无法使用rem适配不同设备的屏幕。

解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。

(1) npm install px2rem-loader --save-dev 安装插件
(2)然后在vue-cli项目找到built/utils文件，在里面加上以下代码：

var px2remLoader = {
  loader: "px2rem-loader",
  options: {
    remUnit: 75     // (这里是指设计稿的宽度为 750 / 10)
  }
}

然后在generateLoaders函数里面插入px2remLoader ，再重启 npm run dev服务即可。

（3）把px转换成rem的配置完成后，还需要在入口文件（main.js）里面配置一段代码，此代码的目的是监听window窗口大小的变化，从而动态改变html根节点的font-size的大小。达到适配不同设备的效果；（注意：不知道为什么要动态改变html根节点的font-size的话，建议去看一下rem的知识）

window.onresize = setHtmlFontSize;
function setHtmlFontSize(){
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const htmlDom = document.getElementsByTagName("html")[0];
    htmlDom.style.fontSize = htmlWidth / 10 + "px";
};
setHtmlFontSize();

上面代码是为了当第一次加载main.js的时候就设置根节点的（html节点）font-size。否则会出现混乱页面。

GPU云服务器云服务器移动端适配方案移动端适配移动端适配 js vue 中使用 webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52511.html

vue中使用第三方UI库的移动端rem适配方案

摘要：需求使用脚手架搭建项目，并且使用第三方的库比如，的时候，因为第三方库用的都是用单位，无法使用适配不同设备的屏幕。解决办法使用插件将第三方库的转换成单位。否则会出现混乱页面。需求：使用vue-cli脚手架搭建项目，并且使用第三方的UI库（比如vant，mint ui）的时候，因为第三方库用的都是用px单位，无法使用rem适配不同设备的屏幕。解决办法：使用px2rem-loader插件...

littleGrow 2019-08-29 15:39 评论0 收藏0
vue 使用lib-flexable，px2rem 进行移动端适配但是引入的第三方UI组件 vu

摘要：最近在写移动端项目就想用，来进行适配把转换成但是也用到了第三方组件库把这个引入发现一个问题就是的组件都缩小了在网上找不到答案最后在一个开发群里找到了解决的方法目前的处理方法是将组件中转化为，避免被转成在中中配置以下代码自定义的全局最近在写移动端项目,就想用lib-flexable，px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是...

Kyxy 2019-08-02 11:53 评论0 收藏0
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

摘要：使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配，这也是我最喜欢的，但是使用这个方案时，你引入第三方库时样式会变小。。这个坑难的我不行，各种百度，各种想法，差一点就放弃了这个方案。最近公司的的项目赶，作为前端的小白懒出新的高度，使出专业的技能 --复制粘贴！！（改别人的代码也是煎熬）我经常做一些H5页面，这样就会遇到适配这个头疼的问题，我分享下我用经常用到的适配方案：这里...

CodeSheep 2019-08-22 16:42 评论0 收藏0
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

摘要：使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配，这也是我最喜欢的，但是使用这个方案时，你引入第三方库时样式会变小。。这个坑难的我不行，各种百度，各种想法，差一点就放弃了这个方案。最近公司的的项目赶，作为前端的小白懒出新的高度，使出专业的技能 --复制粘贴！！（改别人的代码也是煎熬）我经常做一些H5页面，这样就会遇到适配这个头疼的问题，我分享下我用经常用到的适配方案：这里...

monw3c 2019-08-29 15:09 评论0 收藏0