css px wird automatisch in rem konvertiert

Als Front-End-Entwickler, insbesondere wenn es um die Anpassung mobiler Endgeräte geht, ist rem eine Einheit, die wir häufig nach seinen Vorteilen suchen .
Aber wenn wir die px im Designentwurf in rem umwandeln, müssen wir sie manuell berechnen. Das ist ein sehr zeitaufwändiger und mühsamer Prozess. (Verzeihen Sie meine Faulheit~)

1. CSS-Prozessor

Prozessoren wie Sass, LESS und PostCSS können alle damit umgehen.

Sass (implementiert mit der -Funktion von Sass und Hybridmakros):

@function px2em($px, $base-font-size: 16px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2em($px + 0px); // That may fail.
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1em;
}

Sass (mit den Hybridmakros von Sass):

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"{
    #{$property}: $px-values / $baseline-rem;
  }
  @else {
    //Create an empty list that we can dump values into
    $rem-values:();
    @each $value in $px-values{
      // If the value is zero or not a number, return it
      @if $value == 0 or type-of($value) != "number"{
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}

Für Für die obige Methode müssen wir zusätzliche Schreibregeln wie Sass erlernen und sie auch konfigurieren. Obwohl sie sehr einfach ist, kann sie einfacher sein?

2.CSSREM

Dies ist ein von flashlizi geschriebenes Plug-in für großartigen Text. Es ist wirklich praktisch zu verwenden! Wir können es auf GitHub sehen.

Lassen Sie mich unten vorstellen, wie man es konfiguriert:

2.1 Wir können die abhängigen Dateien auf GitHub herunterladen

2.2 Öffnen Sie Sublime Text und geben Sie das Paketverzeichnis ein (Sublime Text - > Einstellungen -> Pakete durchsuchen); Test:

Erstellen Sie eine neue .css-Datei:

我们也可以修改默认配置：
打开cssrem-master文件夹下的cssrem.sublime-settings文件，进行修改
{
    "px_to_rem": 40, //px转rem的单位比例，默认为40
    "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css", ".less", ".sass",".html"]
    //启用此插件的文件类型。默认为：[".css", ".less", ".sass"]
}

11.png

Drücken Sie die Tabulatortaste, um Erhalten Sie die folgenden Ergebnisse:

22.png

Ist das nicht sehr praktisch? Kommen Sie und probieren Sie es aus~

Schließlich ist Attached eine Microsite – verwenden Sie flexible.

js

, um die Anpassung an mobile Geräte zu implementieren.

Das obige ist der detaillierte Inhalt voncss px wird automatisch in rem konvertiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!