css pxは自動的にremに変換されます

フロントエンド開発者として、特にモバイル端末への適応を行う場合、rem はよく使用されるユニットです。その利点はオンラインでたくさんあります。 しかし、デザインドラフト上のピクセルをレムに変換するには、それを手動で計算する必要があります。これは非常に時間と労力のかかるプロセスです。私たちを「解放」する方法はありますか? (怠惰を許してください~)

1. CSSプロセッサ

Sass、LESS、PostCSSなどのプロセッサはすべて処理できます。

Sass (Sass の

function と混合マクロを使用して実装):

@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 (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;
  }
}

上記の方法では、 sass などの追加の記述ルールも学習する必要があり、設定も必要です。とてもシンプルですが、もっとシンプルにできないでしょうか？

2.CSSREM

これは、flashlizi によって書かれた崇高なテキスト用のプラグインです。とても便利です。

GitHub で確認できます。

その設定方法を紹介します:

2.1 GitHub で依存ファイルをダウンロードできます;

2.2 Sublime Text を開き、パッケージ ディレクトリに入ります (Sublime Text -> Preferences -> Browse Packages);

2.3前の手順で開いたディレクトリに cssrem-master フォルダーを配置し、sublime text を再起動して有効にします。

我们也可以修改默认配置：
打开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"]
}

実際のテスト:

新しい .css ファイルを作成します:

11.png

Tab キーを押すと、次の結果が得られます:

22.png

とても便利でしょう? ぜひ試してみてください~

最後に、flexible.

jsを使用して、マイクロサイトを添付します。モバイルデバイスの適応性の一致を達成します。

以上がcss pxは自動的にremに変換されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。