做移动端的布局时,我们经常会用到动态单位rem来适用不同分辨率下的设备,但是设计图与rem之间的换算着实头疼。因为最近投靠vs code编辑器门下,所以就写一篇vs code下如何实现自动换算px和rem。
一、安装cssrem插件
直接在vs code中搜索cssrem安装即可
二、根据设计图改变根字体大小
我们知道flexible.js 的会把设计图分成100份,1rem=10份,假如设计稿是1920px,则1rem=192px
加入我们有个宽度192px的图片,那么它就是1rem,显然并没有这么凑巧的情况,比如我们设计图像素是200,那么200/192计算起来就会很麻烦
所以我们需要设置一下,分析flexible.js源码,我们可以看到
// set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' }
这里docEl.clientWidth / 10就是我们上文说道的1rem等于10份,我们可以根据自己的设计图来适当改一下,比如我改为24,相当于1920/24=80 ,之后我们1rem就相当于80px
这里得到的80我们要记住,后面有用
因为cssrem插件的默认跟字体大小是16 显然不符合我们的要求,需要自己去配置一下
我们打开设置-扩展-cssrem选项,打开如下图
设置Root Font Size 为我们刚刚计算得出的80
至此就设置完毕了
三、使用
1、首先我们新建一个html文件,引入flexible.js
没有可以去GitHub下载:https://github.com/amfe/lib-flexible
2、下载之后打开flexible.js源文件,找到大概18行,把1rem的宽度自行配置一下,比如我们上面的除以24
3、在html文件中引入flexible.js
4、开始正常书写样式,当你出入px的时候,我们会看到如下图
这时候我们看到编辑器已经自动帮我们换算好了,选择即可。
假如我们书写的时候就想用px,之后再统一换算那也是可以的
方法:按住ctrl + shift + p 打开编辑器命令窗口,输入cssrem,如下图
我们选择Px To Rem 即可全部帮我们转换
如果想要转换回来怎么办呢?相信细心的朋友已经发现了,我们只需要选择Rem To Px 就可以帮我们转换回来了
到这里相信大家都已经明白了吧,赶快用起来吧
github可能打开会很慢,flexible.js代码很少,我就贴在下面,需要的话就复制一下
(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 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))
评论前必须登录!
注册