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

需求：使用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。否则会出现混乱页面。

转载于:https://www.cnblogs.com/ivan5277/p/10021440.html

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

vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
Angular入门到精通系列教程（5）- 第三方UI库（Angular Material）
文章目录 1. 第三方UI库的选择 2. Angular Material 2.1. 优缺点 2.1.1. 优点 2.1.2. 缺点 2.2. 引入到项目 3. 总结环境: Angular CLI: ...
Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库基础示例 1.把下载好的 ...
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
Android NDK编译中在libs\armeabi中加入第三方so库文件的方法
Android NDK编译中在libs\armeabi中加入第三方so库文件的方法假设要加入库文件的名字为libffmpeg.so文件 1.要在project\jni目录下新建一目录prebuilt ...
(转)CocoaPods：管理Objective-c 程序中各种第三方开源库关联
在我们的iOS程序中,经常会用到多个第三方的开源库,通常做法是去下载最新版本的开源库,然后拖拽到工程中. 但是,第三方开源库的数量一旦比较多,版本的管理就非常的麻烦.有没有什么办法可以简化对第三方库的 ...
iOS开发中解决第三方静态库符号冲突的终极方案
iOS开发中解决第三方静态库符号冲突的终极方案背景在iOS开发的时候,经常会使用各种第三方静态库,这些库内部可能会打包了相同的第三方库.那么在链接的时候就会发生符号冲突. 例如:A厂商提供的lib ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
Vue移动端项目——Vant 移动端 REM 适配
Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 ...

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

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

最新文章

热门文章