Автоматизируйте откат пикселей с помощью единиц REM во всем проекте.

Я проверил следующую статью, в которой он представил следующее смешение:

размер шрифта rem с откатом в пикселях

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

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

Я чувствую себя очень комфортно, используя rem в своих проектах после размещения font-size: 62.5% в html, поэтому 1rem = 10pixels.

Но я хотел бы знать, есть ли микширование или метод создания запасного пикселя для любого rem, используемого во всем проекте, например:

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

В этом случае поле справа = 5 пикселей и ширина 32 пикселя. Проблема с модулями rem заключается в том, что IE8, Opera mini или Safari 3.2 не поддерживаются. Таким образом, сайт не будет корректно отображаться ни в одном из этих браузеров.

Есть ли способ автоматизировать откат пикселя с помощью rem по всему проекту?


css sass mixing pixels
person Daniel Ramirez-Escudero    schedule 03.06.2014    source источник
comment
вы видели это (основано на меньшем, но может быть полезным) css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing   -  person roo2    schedule 03.06.2014
comment
@James Donnelly Кажется, ответ Карла Меркли на этой странице - это ответ, который я ищу.   -  person Daniel Ramirez-Escudero    schedule 03.06.2014
comment
@James Donnelly Хорошая причина для использования REM заключается в том, что он имеет преимущества использования EM, верно? Например, если они хотят увеличить масштаб или увеличить типографику. Это верно?   -  person Daniel Ramirez-Escudero    schedule 03.06.2014

Ответы (2)


arrow_upward
1
arrow_downward

Вот решение, позволяющее использовать примесь rem to px для любого свойства:

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);
}

ВЫВОД

html {
  font-size: 62.5%;
}

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

Пример: http://sassmeister.com/gist/e888e641925002b5895c.

person Vangel Tzo    schedule 03.06.2014

arrow_upward
0
arrow_downward

Это решение будет работать со свойствами ярлыка, которые содержат смешанные значения.

// Global Var
$root-font-size: 16;

@mixin rem($property, $values) {
  $pxvalues: null;
  $remvalues: null;

  @each $value in $values{
    $pxvalue: null;
    $remvalue: null;
    @if type-of($value) == 'number'{
      @if ($value > 0 or $value < 0){
        $pxvalue: ($value)+px;
        $remvalue: ($value / $root-font-size)+rem;
      } @else {
        $pxvalue: $value;
        $remvalue: $value;
      }
    } @else {
      $pxvalue: $value;
      $remvalue: $value;
    }

    $pxvalues: append($pxvalues, $pxvalue);
    $remvalues: append($remvalues, $remvalue);

  }

  #{$property}: $pxvalues;
  #{$property}: $remvalues;
}

// Usage: pass pixel values without units
.foo{
  @include rem(margin, 80 auto);
}

Выход:

.foo{
  margin: 80px auto;
  margin: 5rem auto;
}
person Jeff    schedule 11.03.2020