Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >在 Visual Studio Code 中设置 px 转换 rem

在 Visual Studio Code 中设置 px 转换 rem

作者头像
离殊
发布于 2022-04-01 08:06:21
发布于 2022-04-01 08:06:21
3.2K0
举报
文章被收录于专栏:DingLin 随笔DingLin 随笔

最近在做了移动端活动页面,遇到了 H5 适配的问题,其实也有 pxtorem 来做自动转换,但是组内讨论过后,还是决定自己计算 rem ,其实 rem 已经过时了,目前比较流行的是 ViewPort 了。组内一致决定了,那就只能这样干了。

现在遇到的问题是在设置了 RootFontSize 后,需要自己计算这个 rem 的值,直接找了个插件 cssrem 来做 px 自动转换城 rem,看个作者的例子

装好之后可以直接在 vscode 中设置对应的选项来进行自定义

#在 VSCode 中设置 ren 配置

基准 font-size: 16px,但你可以通过以下配置进行修改:

打开 ctrl+, 用户配置界面(或项目配置),只有三个配置项:

  • cssrem.rootFontSize 基准 font-size (单位:px),默认:16
  • cssrem.fixedDigits px 转 rem 小数点最大长度,默认:6
  • cssrem.autoRemovePrefixZero 自动移除 0 开头的前缀,默认:true。(虽然可以省略,但是还是感觉有个 0 比较切合实际)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
rem适配布局
rem 是根 em(root em)的缩写,是相对于根元素(html 元素)的字体大小。
赤蓝紫
2023/01/02
1.4K0
rem适配布局
前端实现项目中px自动转换rem
文章地址:https://cloud.tencent.com/developer/article/2472716
一起重学前端
2024/12/03
2770
px rem 转换的几种方法(分辨率字体调整)
目前(2016-06-19)px转rem 的工具已经不少了。下面介绍几个转换的方案。
White feathe
2021/12/08
2.5K0
px  rem 转换的几种方法(分辨率字体调整)
面试官:px、em、rem、vw、rpx 之间有什么区别?
做移动端布局时,希望页面可以做到用户的手机屏幕越大、看见的页面元素就越大。因此,只能使用相对长度单位。
万少
2025/02/11
1060
面试官:px、em、rem、vw、rpx 之间有什么区别?
8、手机适配问题之rem和lib-flexible
flexible方案是手淘经过多年的摸索和实战,总结出的一套移动端适配方案,这里我推荐一篇w3c大漠老师的一篇文章使用Flexible实现手淘H5页面的终端适配,里面详细的讲解了该方案的使用和原理。
Ewall
2018/09/04
1.3K0
8、手机适配问题之rem和lib-flexible
Vue项目自动转换 px 为 rem,高保真还原设计图
因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变rem的大小。
小蔚
2019/09/11
1.5K0
简单粗暴的移动端适配方案 - REM
0. 前言 手机市场日渐丰富的同时,给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,但是对于页面有复杂结构或者
腾讯NEXT学位
2018/05/14
2K0
认识em、rem单位以及cssrem自动换算工具
设备屏幕有多种不同的分辨率,页面适配方案有如下几种: 1、全适配:响应式布局+流体布局 2、移动端适配:
Devops海洋的渔夫
2019/05/31
2.2K0
移动适配-rem
注意: 如果电脑显示的缩放为125%,那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。(因为电脑显示的手机宽度是 :125%×真实手机宽度)
且陶陶
2023/04/12
1.5K0
px和rem的换算与设置
一般所有浏览器的html根元素font-size:16px 1rem = 16px 所以所有px值都基于它来换算 设计稿px/换算的rem = 16px / 1 ===> 换算的rem= 设计稿px/16px
杨肆月
2019/08/15
3.4K0
vue中px自动转化为rem
很多人写这种小工具文件会习惯性的加上闭包,这个其实是没有必要的。ES6 中每个文件都是单独的一个模块。
leader755
2022/03/09
1.9K0
日常开发中px单位自动转换为rem的方法
https://qmblog.qmzm.co/2021/11/wz01-1-2-1.png
青梅煮码
2023/02/18
1.1K0
来看看 px、em、rem的介绍和使用吧!
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
玖柒的小窝
2021/11/16
7960
使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/17
2.3K0
移动端页面的自适应rem
具体来说,有的屏幕320px宽,有的屏幕640px宽,有的更宽,如果你写固定px,那么要么小的放不下,要么大的有大片空白。
javascript艺术
2021/05/28
2.5K0
移动端页面的自适应rem
愈发熟练的 CSS 技巧
rem 相对于根元素 <html> 的 font-size 的大小来计算坐作为一个单位;simple-flexible 是根据手淘团队 lib-flexible.js,比较,改写的一个插件,兼容 UC 竖屏转横屏出现的 BUG,自定义视觉设计稿的宽度:designWidth,设定最大宽度:maxWidth 这里有 simple-flexible 的 Github 地址,下载下来用即可;
落落落洛克
2021/01/08
8500
愈发熟练的 CSS 技巧
布局常用解决方案对比(媒体查询、百分比、rem和vw/vh)
简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动端布局中的不足,接着介绍了几种不同的自适应解决方案。
用户8639654
2021/07/26
2.2K0
px、em、rem
1、px 1个px相当于一个像素 2、em em是相对的长度单位,既然是相对的长度单位,那么一定有一个参照对象。 em 相对参照对象为父元素的font-size em具有继承的特点,如果em的父元素没有设置font-size,那么它会去找他父元素的父元素,一级级的往上找,知道找到位置 当没有设置font-size时,浏览器会有一个默认的em设置,一般设置为:1em = 16px 3、rem rem也是相对的长度单位,参照对象为根元素html,参照物固定不变,所以比较好计算。 当没有设置font-size时,
小胖
2018/06/27
1.4K0
再看CSS长度单位使用,做到胸有成竹
涉及到网站需同时兼容 PC 和移动端情况更甚:px、百分比、em、rem、vw etc.
掘金安东尼
2024/01/28
2280
rem适配布局
@media mediatype and | not lonly (media feature) {
星辰_大海
2020/09/30
1.9K0
相关推荐
rem适配布局
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档