开发工具: 
    编辑器: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. Hibernate基础-HelloWord

    1. ORM :ORM (Object /Relation Mapping ): 对象/关系映射(理解)      1) ORM 主要解决对象 -关系的映射      2) .ORM的思想:将关系数据 ...

  2. ffmpeg+libx264+facc交叉编译 实现264流录制avi文件

    默认交叉编译器已经搭建好. .. . . . . .... .... 需求: 把标准的h264流保存成avi格式的实现文件,所以须要h264的解码器,avi文件容器,传输协议类型是文件.这些会体如今f ...

  3. jquery获取兄弟元素

    按照w3c school的指引,jquery中,要获得一个元素的兄弟,可以用 prev().next()两种方法.顾名思义,prev()获得前一个,next()获得后面一个. 问题是,如果存在前后兄弟 ...

  4. 第一个Java程序示例——Hello World!【转】

    本文转载自: 跟随世界潮流,第一个Java程序输出“Hell World!”. 通过Eclipse运行程序 启动Eclipse,在菜单中选择“文件 --> 新建 --> Java项目”,弹 ...

  5. YTU 1001: A+B Problem

    1001: A+B Problem 时间限制: 1 Sec  内存限制: 10 MB 提交: 4864  解决: 3132 [提交][状态][讨论版] 题目描述 Calculate a+b 输入 Tw ...

  6. inserting a large number of records with SQLiteStatement.

    Below is a demo application I wrote that creates 100 records programmatically, inserts them using on ...

  7. pssh 批量管理执行

    pssh 是一个python写的批量执行工具,非常适合30台服务器以内的一些重复性的操作 安装很简单,只要python版本2.4 以上的都行 用这个工作最好把机器做做好ssh信任关系,不然很麻烦 每次 ...

  8. filter() 函数

    描述 filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表. 该接收两个参数,第一个为函数,第二个为序列,序列的每个元素作为参数传递给函数进行判,然后返回 Tru ...

  9. 解决UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position xxx ordinal not in range(128)

    Python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...

  10. asp.net MVC5 中的捆绑和更改bootstap默认的样式

    在MVC5的视图中使用@Scritps.Render(),@Styles.Render() 分别可以加载样式和脚本.捆绑的和实际的路径都可以. 并且可以利用 编程的方式灵活引用css文件和脚本文件. ...