后端程序员如何使用px2rem简单实现移动端自适应html方式

作为后端程序员,前端的东西就只会一些基本的html、css、JavaScript。突然我要做一个手机上的html。需要实现响应式,适应不同分辨率的手机,这个是一个让我头大的问题。在网上找了好久,都说用什么vue+px2rem或者是fix3+px2rem。前端的框架很少用,根本一时间来不及学那些了。于是请教了一下前端的朋友,他说就用px2rem就行了很简单。于是琢磨了一下午。把过程贴一下。

①原理:px2rem是一个工具,用这个工具读css文件,将文件中的px单位转换为rem单位。当然是合理的转换。(网上也有些人贴了手写的几行转换操作的js,我觉得不是很可靠)
②步骤:先安装px2rem这个工具,再用这个工具对我们已经调好的CSS文件进行编译。(安装px2rem的前提是要先安装node.js+npm)。
1、去官网下载:https://nodejs.org/zh-cn/ 安装文件。
2、安装下载好的node.msi安装包
3、打开cmd窗口录入:node -v查看版本信息,是否安装成功,再试npm -v查看npm版本信息。
4、信息无误过后,安装px2rem。在cmd中执行命令过后自动下载安装:npm install -g px2rem
5、安装好过后就可进行css文件的编译了。还是在CMD中执行编译命令:px2rem -o build src/*.css。其中-o表示输出,build是输出目标一个文件夹,可以自定义。后面的css就是你的文件了。
6、如果你的文件叫A.css,那么编译过后,会出现一个build文件夹,里面会有一个A.debug.c

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值