Question

我正在使用Stylus作为我的CSS，除了一个讨厌的时刻它才能正常工作。

我正在使用REM单元，因此我创建了一个将px自动转换为Rem

的功能

pxToRem(pixels, context = $rootUnitSize)
  return unit(pixels / context, 'rem')

pxToRem(20) //it convert 20px to rem

当我只有一个单位可以计算时，效果很好。但我有两个（或将来更多）。网络上14 px，手机上13 px。

/* main root font-size. It used for the REM calculation */
$rootUnitSize = 14px
/* this value uses on tablets */
$rootTabletUnitSize = 13px
/* this value uses on phones */
$rootSmartPhoneUnitSize = 13px

因此，当我将html字体大小更改为最低值时，我丢失了正确的尺寸。因为我的html大小为13，但计算的根值为14。

html
  font-size: $rootUnitSize
  +narrower-than(tablet)
    font-size: $rootTabletUnitSize  //now root unit is 13. But not for `calculations`

要解决此问题，我确实可以传递上下文（对于ex-mobile root unit size）

margin-bottom: pxToRem(3, $rootSmartPhoneUnitSize)

但是我不喜欢这个解决方案，所以，也许存在其他更优雅的方式？（类似......从某个标签中获取字体大小？比如html？）谢谢

Stylus css如何获取正文字体

0 个答案: