当前位置：网站首页 > 技术文章 > 正文

一个使用最简单的px转rem预处理工具

zhezhongyun 2025-03-14 22:25 38 浏览

如果你使用 Stylus作为你的预处理CSS的工具，那么px2rem是你使用最简单处理px转rem工具，使用方法如此简单：

首先安装工具。stylus-px2rem

npm install stylus-px2rem --save-dev

然后只要在你的index.styl文件引用就可以里

@import "node_modules/stylus-px2rem"
div{ 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}

Stylus工具将index.styl编译成index.css并预处理将px转换成rem上面内容输出为：

div{
    margin:1.5rem 1.5rem;
    font-size:.875rem;
    padding-bottom:.75rem;
    width:6.25rem;
    height:6.25rem
}

默认html-font-size＝10px 你可以设置它。你可以设置部分样式转化，部分样式不转换成rem，你只需这么引用styl即可。这种方法mixins必须引用它

@import 'node_modules/stylus-px2rem/lib/mixins'
@import 'node_modules/stylus-px2rem/lib/font-size'
@import 'node_modules/stylus-px2rem/lib/border'
@import 'node_modules/stylus-px2rem/lib/margin'
@import 'node_modules/stylus-px2rem/lib/padding'
@import 'node_modules/stylus-px2rem/lib/width'
@import 'node_modules/stylus-px2rem/lib/height'
@import 'node_modules/stylus-px2rem/lib/line-height'

html-font-size = 10px;

div {
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}

评论

Px Em 换算工具

上一篇：【莱温坦伯】水电安装算量规范及支吊架计算
下一篇：免费了，切图标记外挂神器 Assistor PS 深入解读(下)

相关推荐

十字军之王3作弊码有哪些王国风云3全控制台代码分享: 王国风云3作弊码有什么？王国风云3游戏里我们可以使用作弊码来进行游戏，一些特别的玩法是不会少了这方面的内容的。不过具体的作弊码是很多的玩家不清楚的，为了让大家都能用游戏里的作弊码，这里就一起来看看小编...

SpringBoot的Restful的请求路径参数@PathVariable注解的使用: 1.介绍1.1介绍大家都知道RESTFul风格的接口的URI路径和普通的接口是不一样的，根据RESTFul的规范请求的URI路径里需要指向一个具体的资源（Resource），这个URI路径里面可以...

Nacos源码—2.Nacos服务注册发现分析四: 大纲5.服务发现—服务之间的调用请求链路分析6.服务端如何维护不健康的微服务实例7.服务下线时涉及的处理8.服务注册发现总结7.服务下线时涉及的处理(1)Nacos客户端服务下线的源码(2)Nacos...

JavaScript矩阵快速计算方法（如何用java计算矩阵相乘）: 有很多方法可以在JS中表示矩阵数学。有些方法可读性强，有些方法速度快。我想探索一下这些差异。某些技术实际上能为我节省多少时间？为此，我将只研究一个操作：逐元素加法以减少总案例数，但差异操作可能会稍...

如何在前端通过JavaScript创建修改CAD图形: 背景在之前的博文CAD图DWG解析WebGIS可视化技术分析总结、CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap中讲解了如何把CAD的DWG格式的图纸Web可视化的方案，那在Web前...

如何写一个webpack插件(一)（webpack插件怎么写）: 前言最近由于用着html-webpack-plugin觉得很不爽，于是乎想自己动手写一个插件。原以为像gulp插件一样半天上手一天写完，但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。首...

如何用Go写一个benchmark 解析器及Web UI 数据可视化?: 简介用Go编写的benchmark输出解析器，功能如下读取gotest-bench=.-benchmem的输出文件（如benchmark.txt）解析出每行数据写入成CSV文件...

k8s实践(八):ConfigMap and Secret: 一、概述1.ConfigMap在实际的应用部署中，经常需要为各种应用／中间件配置各种参数，如数据库地址、用户名、密码等，而且大多数生产环境中的应用程序配置较为复杂，可能是多个Con...

前端最常用的25个正则表达式，代码效率提高 80%: 在日常开发中，正则表达式是非常有用的，正则表达式在每个语言中都是可以使用的，他就跟JSON一样，是通用的。在日常开发中，了解一些常用的正则表达式，能大大提高你的工作效率，例如字符串的匹配表单项的格式校...

游戏《重返德军总部》秘籍代码大全完全版简要分享: 重返德军总部这款游戏当中为玩家们带来了很多非常经典熟悉的秘籍作弊码，玩家们可以通过在游戏当中使用这些秘籍作弊码更好的体验到游戏当中的精彩内容，感兴趣的小伙伴就和小编在下面一起来看看吧。重返德军总部秘籍...

32个手写JS，巩固你的JS基础(面试高频): 01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组constarr=[1,[2,[3,[4,5]]],6];//=>[1,2,3,4,5,6]复制代码...

golang常用数据结构之map详细讲解: 概述map是常见的一种数据结构,大部分编程语言都有,用于存储一系列无序的键值对,map也被称为字典或关联数组,顾名思义，键相当于索引,通过键与值形成映射关系,达到快速查找数据的目的。声明和初始化var...

MapStruct 常用的重要注解和方法（mapstruct详解）: MapStruct是一个Java代码生成器，用于简化Java对象之间的映射操作。它通过注解和方法来定义映射规则。以下是MapStruct中常用的重要注解和方法：注解1.@Mapper：用于标记一个接...

Java对象中非空属性一键转Map，让你的代码飞起来: 哈喽，大家好，我是木头左！引言在日常开发中，经常会遇到需要将一个Java对象中的非空属性提取出来，放到一个Map中的情况。这样的做法有很多好处，比如方便进行属性的查找、修改等操作，同时也能够提升代码的...

在Kubernetes中使用ConfigMap（kubectl set env）: 在《为Kubernetes安装Dashboard》中，我们已经使用VirtualBox安装了CentOS7.9，并在其上安装了Docker20.10.11、Kubernetes1.23.3和ku...

一周热门

最近发表

首页
收录
顶部