vue中的适配：px2rem

aaron 发布于2019-08-29 17:18 / 3040人阅读

摘要：这应该是项目在适配移动端时候，最简单的方法之一下面是基本步骤使用下载并引入在中引入将添加到在中添加如下配置代码如下这个是重点，设计稿是完了就可以直接用做单位按照的设计稿撸代码了，

这应该是vue项目在适配移动端时候，最简单的方法之一
下面是基本步骤（使用cnpm）
1.下载并引入lib-flexible

cnpm install --save lib-flexible

在main.js中：import "lib-flexible/flexible"
2.引入px2rem-loader

cnpm install --save  px2rem-loader

3.将px2rem-loader添加到cssLoaders

在build/util.js中
添加如下配置

代码如下

 const px2remLoader = {
    loader: "px2rem-loader",
    options: {
      remUnit: 75//这个是重点，设计稿是750px
    }
  }

 const loaders = [cssLoader,px2remLoader]

完了就可以直接用px做单位按照750的设计稿撸代码了，

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

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

vue中的适配：px2rem

摘要：这应该是项目在适配移动端时候，最简单的方法之一下面是基本步骤使用下载并引入在中引入将添加到在中添加如下配置代码如下这个是重点，设计稿是完了就可以直接用做单位按照的设计稿撸代码了，这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 ...

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

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

Kyxy 2019-08-02 11:53 评论0 收藏0
【技术】移动端适配 px2rem/px2vw 的原理与实现

摘要：不同的前端框架，配合等打包工具，可以更高效的使用这些插件，完成移动端适配的配置工作。简介【目标】：前端开发移动端及H5时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局！【基础】 dpr（设备像素比）css的像素px不等于设备像素/分辨率/各种值，css的px可以简单理解为虚拟像素，与设备无关，css的px需要乘dpr计算为设备像素； css3 的 rem，即ro...

AlexTuan 2019-08-22 18:41 评论0 收藏0
移动端网页布局适配rem方案小结

摘要：当明确规定根元素的时，单位以该属性的初始值作参照。适配具体实现方案设计稿尺寸宽度为，如果设计稿是，下边会自动计算的值比如，具体的尺寸不用调整例如，不用调整，这是一个比例大小，对应的元素大小值会根据新的比如等于改变，从而按照比例适配。前言根据 W3C 规范中对 1rem 的定义： 1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem...

2shou 2019-08-30 15:55 评论0 收藏0