Automate pixel fallback using REM units throughout a project

可紊 提交于 2019-12-12 22:08:01

问题


I checked the following article in which it presented the following mixing:

rem font size with pixel fallback

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

I feel very confortable using rem on my projects, after placing font-size: 62.5% on the html so 1rem = 10pixels.

But I would like to know if there is a mixing or a method to create a pixel fallback for any rem used in a whole project, as for example:

&:before{
    color: white;
    margin: 0 0.5rem 0 0;
    left: 0;
    text-align: center;
    top: 0;
    width: 3.2rem;
}

In this case the margin-right = 5pixels and width 32pixels. The issue with rem units is that IE8, Opera mini or Safari 3.2 is not supported. So the site would not be correctly visible from any of these browsers.

Is there a way to automate the pixel fallback using rem throughout a project?


回答1:


Here is a solution so you can use the rem to px mixin for any property:

html {
  font-size: 62.5%;
}

@function calculateRem($size) {
  $remSize: $size / 10px;
  @return #{$remSize}rem;
}

@mixin rem($propertie, $value) {
  #{$propertie}: $value;
  #{$propertie}: calculateRem($value);
}

p {
  font-size: calculateRem(32px);
  @include rem(width, 100px);
  @include rem(margin, 50px);
}

OUTPUT

html {
  font-size: 62.5%;
}

p {
  font-size: 3.2rem;
  width: 100px; /* Fallback */
  width: 10rem;
  margin: 50px; /* FallBack */
  margin: 5rem;
}

An example: http://sassmeister.com/gist/e888e641925002b5895c



来源:https://stackoverflow.com/questions/24013848/automate-pixel-fallback-using-rem-units-throughout-a-project

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!