开发工具: 
    编辑器:vscode;
    css预处理器:less;(无具体要求);

步骤:
  1. vscode安装cssrem插件;




  2. 修改css插件的默认配置,其默认转换px为16px, 需要改为当前项目设计的1rem所对应的px,vscode插件的默认安装目录一般为 C:\Users\用户名\.vscode\extensions

找到 cipchk.cssrem-0.0.3  插件,打开package.json, 修改其默认配置:px;
font-family: Microsoft Yahei, Arial;
background: #f0f0f0;
font-size: 0.5rem;
margin: 0 auto !important;
/*滚动条卡顿*/
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}










让px单位自动转换为rem的方法的更多相关文章

  1. vue 自动px单位自动转换rem

    vue 适配移动端 假设设计图是375 第一步 安装 lib-flexible npm i lib-flexible --save 第二步 安装 px2rem-loader npm install p ...

  2. 自动把网页px单位转换成rem

    自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果

  3. vue项目中px自动转换为rem

    .安装 postcss-pxtorem : npm install postcss-pxtorem -D .修改 /build/utils.js 文件 找到 postcssLoader const p ...

  4. vue换算单位px自动转换rem

    cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...

  5. css3单位em,rem,px,vw,vh等

    昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...

  6. vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

    偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...

  7. px-rem px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...

  8. px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  9. vue px转换为rem

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

随机推荐

  1. Java经常使用日期操作具体解释

    Date类型大多数时间分量计算方法已经被Calendar代替 Date经常用法setTime getTime() new Date();默认获取当前的时间 SimpleDateFormat用来格式化和 ...

  2. 反混淆、反编译unity3d动画插件DFTweenLite得到源代码

    出处:http://blog.csdn.net/u010019717 author:孙广东      时间:2015.3.17   23:00 我为什么要得到这个源代码.由于有洁癖! 对于Itween ...

  3. ASP.NET MVC中为DropDownListFor设置选中项的方法

    在MVC中,当涉及到强类型编辑页,如果有select元素,需要根据当前Model的某个属性值,让Select的某项选中.本篇只整理思路,不涉及完整代码. □ 思路 往前台视图传的类型是List< ...

  4. ABAP文件加密解密-PGP

    1.SM69创建命令 2.解密 DATA: lv_para = '--passphrase (key) -o /oracle/sfdata/sfdata.csv -d /oracle/sfdata/s ...

  5. idea新建springmvc+spring+mybaties项目1

    1,点击file,选择module,新建项目 2,选择maven -- >maven-archetype-webapp 3,输入GroupId,ArtifactId,点击next 4,选择本地m ...

  6. 关于追踪qemu 源码函数路径的一个方法

    这阵子一直在研究qemu 磁盘io路径的源码,发现直接看代码是意见非常低效率的事情,qemu是一个比较庞大的家伙(源码部分大概154MB,完全由C语言来完成),整个结构也都非常地复杂,所以从代码上研究 ...

  7. 1.ARC下是否有内存溢出等问题 2.@property参数 3.#import和@class的区别

    1.ARC下是否有内存溢出等问题? 答案:必须要担心啊,ARC也不是万能的.答案:必须要担心啊,ARC也不是万能的.这里主要是涉及到集合类的数据类型   比如数组,我们定义了一个可变数组muarr1, ...

  8. bzoj4811 [Ynoi2017]由乃的OJ 树链剖分+位运算

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4811 因为位运算的结果有可合并性,所以可以树链剖分,线段树维护: 细节很多,特别要注意从左往 ...

  9. Oracle “CONNECT BY” 用法

    Oracle “CONNECT BY”是层次查询子句,一般用于树状或者层次结果集的查询.其语法是: [ START WITH condition ] CONNECT BY [ NOCYCLE ] co ...

  10. box-shadow 模拟border

    border会占据空间;如果想加边框效果,但是又不占用空间,可以使用box-shadow来模拟 demo div 100*100 border:10px solid red; 可以写: div 100 ...