好玩的东东

作者:frank 发表日期:2018-07-26 23:18:54 更新日期:2018-07-26 23:18:54 分类:猿文色

摘要

好玩的东东!!

正文

同事写了个 CSS webpack 插件,会将 CSS 中的 px 单位自动根据设置的屏幕尺寸数据转换为 media query 格式代码。


比如下面 CSS 代码: 

html, body { 

   font-size: 12px; 

}


如果设置了屏幕尺寸数据为 \[1280, 1920\],转换后变为: 

@media screen and (min-width: 1280px) { 

  html, body {

    font-size: 12px; 

  }

}

@media screen and (min-width: 1920px) {

  html, body {

    font-size: 16px;

    }

}


这样只要在全局以 1280px 为标准开发页面,那么在不同尺寸的 PC 屏幕上,会自动生成适应不同屏幕尺寸的样式代码。由于所有的 px 都会被转换,所以最好只在根元素设置 px,其他样式全部使用 rem。 


最近在做一个项目,视觉稿以 1920px 输出,标准像素是 16px,如果要兼容 1280px,根元素要设置为 10.6667px,但是由于浏览器建议最小字体大小为 12px,所以最好的视觉稿规范是如果以 1920px 输出,标准像素最好是 18px。


根据目前的视觉稿 16px,如果要改为 18px,那么所有的 rem 单位都要除以 1.125。也就是说: 

.a {

  font-size: 1.25rem;

}

.a1 {

  margin: 4rem 2rem;

}


要转换为: 

.a {

  font-size: calc(1.25rem / 1.125);

}

.a1 {

  margin: calc(4rem / 1.125) calc(2rem / 1.125);

}


使用正则可以直接替换,但是看起来很丑。怎么样可以把计算结果直接输出呢? 


好玩的地方来了!!


第一步,先使用正则替换为:

// (\d*(\.\d+)?)rem 替换为 $1/1.125rem

.a {

  font-size: 1.25/1.125rem;

}

.a1 {

  margin: 4/1.125rem 2/1.125rem;

}


第二步,安装 “Calculate” 插件,在代码中使用正则选中所有除法表达式: 

// (\d*(\.\d+)?)/1.125



第三步,使用 Shift + Ctrl + p 打开 VSCode 的全局搜索,输入 > 执行命令,输入 Calculate 选择 Calculate and Replace 即可:



结果如下:

.a1 {

  margin: 3.555556rem 1.777778rem;

}

.a2 {

  height: 7.111111rem; width: 14.222222rem;

}


第四步,使用正则表达式保留两位小数:

// (\d+\.\d\d)(\d+) 替换为 $1


最终结果如下:

.a1 {

  margin: 3.55rem 1.77rem;

}

.a2 {

  height: 7.11rem; width: 14.22rem;

}


完~