站长资源
中国站长网站

vs code插件之cssrem结合flexible.js实现自动转换

做移动端的布局时,我们经常会用到动态单位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))

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » vs code插件之cssrem结合flexible.js实现自动转换

评论 抢沙发

评论前必须登录!