CSS值自动转REM的Sublime Text插件

最新推荐文章于 2023-11-04 21:05:42 发布
最新推荐文章于 2023-11-04 21:05:42 发布
阅读量127 收藏
点赞数
原文链接：http://www.cnblogs.com/RVon/p/8567133.html
版权

在移动页面的开发中，我们通常采用rem来做适配，但是每次进行计算特别麻烦，也会大大降低我们的开发效率，为了提高开发效率，我们可以使用CSSREM插件。
CSSREM简介
一个CSS的px值转rem值的Sublime Text 自动完成插件。插件效果如下：

 

 
 

安装
下载本项目，他是一个压缩的文件包，下载后直接解压即可https://github.com/flashlizi/cssrem
进入packages目录：Sublime Text -> Preferences -> Browse Packages...

 
 

 

复制下载的cssrem目录到刚才的packges目录里。

 
 

2.png

重启Sublime Text。配置参数
参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrempx_to_rem
px转rem的单位比例，默认为40。max_rem_fraction_length
px转rem的小数部分的最大长度。默认为6。available_file_types
启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。

实际测试
新建一个.css文件：

 

 
 

 

 

 

 

转载于:https://www.cnblogs.com/RVon/p/8567133.html

dingqiong3309
关注
写一个Sublime Text 2插件(CSS文件里px单位替换成rem单位)
小立的专栏
05-13 2139
写这个文章就是想大家知道sublime text 插件开发还是很简单的，学会如何从设置文件里获取设置。
sublime cssrem-master插件
10-13
sublime cssrem-master插件使用
好用的px转rem的插件
weixin_34189116的博客
12-10 116
一个CSS的px值转rem值的Sublime Text 3自动完成插件。 下载地址： https://github.com/flashlizi/cssrem 安装 下载本项目，比如：git clonehttps://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse...
cssrem(sublime css转rem插件)
lzccheng
08-10 1537
github
VSCode中cssrem插件
Noraa_Fu的博客
06-25 439
设置[ctrl+,][command+,]找到 root font size, 设置屏幕宽度/划分分数，单位为px。
sublime text3 cssrem插件
07-23
为了赚取积分，我也是黔驴技穷了，打开preference browse packages,将解压包拖进去，即可，记得修改参数哦
CSSPxToRem:Sublime Text插件，可将像素CSS单位转换为rem
05-19
Sublime Text插件，可将像素CSS单位转换为rem和back。 安装 cd "~/Library/Application Support/Sublime Text 2/Packages" git clone https://github.com/cruncher/CSSPxToRem.git 用法 选择一块CSS 点击Cmd-alt-r...
sublime text 3 插件 cssrem
04-28
sublime text 3 插件 cssrem
Sublime Text 3
03-21
爱前端Marte为了方便前端开发工程师的工作，封装制作了这个Sublime text 3版本。 本版本已经在Sublime的基础上特针对前端开发进行了如下优化(增加了50多种功能)： Emmet使用说明：www.webqianduan.cn/491.html (想...
一个神奇的vscode插件cssrem
lxw621的博客
10-27 1622
是不是太复杂了，我记得以前写的时候没这么复杂呀，但是差不多大半年没碰了，忘的差不多了，于是还是含泪写含泪看视频。刚开始还在使用媒体查询，使用括号算rem，先划分数，再确定宽度。于是得到公式 页面效果 / (浏览器宽度 / 份数)。当然，默认是1rem=16px，也是可以修改的。写了16px自动帮你转换成rem。于是看完这视频，就到了本文章最重要的部分。最近复习学到了移动端的适配部分。在vscode的设置里面可以修改。根据你开发的情况来修改。于是就有了如下的代码样子。
sublime text3安装px2rem插件，css转rem插件
csl125的博客
01-28 895
1.css转rem插件安装地址:http://blog.csdn.net/html5_/article/details/47446671 或： https://github.com/hyb628/cssrem.git 2.将下载的插件将其解压，并且打开sublime， 找到：Sublime Text -> Preferences -> Browse Packages，将解压好的文
VScode cssrem插件的安装和使用指南
qq_73992463的博客
11-04 1423
为了更方便地使用rem单位，我们可以借助VScode的插件来自动转换px为rem。本文将介绍VScode cssrem插件的安装和使用方法，帮助你更高效地进行移动端开发。
rem适配方案
MoYuP_ENG的博客
04-11 4679
rem适配方案一 一、原理 1、让一些不能等比自适应的元素，达到当设备尺寸发生改变时等比例适配当前设备 2、使用媒体查询根据不同设备比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也发生变化，从而达到等比例缩放的适配 二、技术选取 rem+媒体查询+less技术 三、设计稿 设计稿一般由网工提供，设计稿现在基本以750px为准，根据设计稿要求进行项目开发。 四、元素大小取值方法 注：拿到设计稿时，一般将屏幕宽度分15等份 比如750px 750
CSS之px自动转rem插件CSSREM 的sublime的安装流程
技术改变世界
10-17 212
CSS之px自动转rem插件CSSREM 的sublime的安装流程一、安装： 1.下载本项目，比如：git clone https://github.com/flashlizi/cssrem 2.进入packages目录：Sublime Text -> Preferences -> Browse Packages… 3.复制下载的css
flexible 粘贴即用
前端从0到100000
08-20 484
//可自行对比 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 *
CSSREM插件
weixin_34043301的博客
11-21 536
CSSREM 一个CSS的px值转rem值的Sublime Text 3自动完成插件。 插件效果如下：   安装 下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages... 复制下载的css...
cssrem转换工具_好用的px转rem插件推荐
weixin_33100265的博客
01-14 1585
在响应式布局中，rem这个css单位已经慢慢崭露头角，成为最佳解决方案之一。然而在固定布局时我们通常以px为基准单位进行调整，进而通过计算获取rem的值，这时如果有个好用的px转rem工具会让工作事半功倍。本文将推荐一些常用开发工具的px转rem插件VSCode插件1、cssrem安装快捷键ctrl+p打开转到文件搜索框，输入命令：ext install cssrem配置参数配置文件：VSCode...
CSSREM一个快速从px转为rem的插件
不会写代码的前端
05-04 1065
CSSREM一个快速从px转为rem的插件 1、sublime安装css插件实现px转rem 插件效果如下： 安装 下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages… 复制下载的cssrem目...
postcss-pxtorem 自动转换
最新发布
04-10
postcss-pxtorem是一个PostCSS插件，用于将像素单位（px）转换为rem单位。它可以帮助开发人员在开发响应式网站时更方便地处理不同屏幕尺寸下的样式。 下面是一个使用postcss-pxtorem自动转换的示例： 1. 首先，确保你已经安装了postcss和postcss-pxtorem插件。你可以使用以下命令进行安装： ```shell npm install postcss postcss-pxtorem --save-dev ``` 2. 在项目的根目录下创建一个postcss.config.js文件，并添加以下配置： ```javascript module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 基准值，即1rem等于多少px propList: ['*'], // 需要转换的属性，默认为全部 }), ], }; ``` 3. 在你的CSS文件中使用像素单位（px）编写样式，例如： ```css .container { width: 320px; font-size: 14px; margin-bottom: 20px; } ``` 4. 运行postcss命令，将px转换为rem。你可以使用以下命令： ```shell npx postcss input.css -o output.css ``` 5. 查看转换后的CSS文件，你会发现像素单位已经被转换为rem单位，例如： ```css .container { width: 20rem; font-size: 0.875rem; margin-bottom: 1.25rem; } ``` 这样，你就成功地使用postcss-pxtorem自动将像素单位转换为rem单位了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值