css px が自動的に rem に変換される - 「怠け者」must-have_html/css_WEB-ITnose

フロントエンド開発者として、特にモバイル端末への対応を行う場合、rem はよく使用されるユニットであり、その利点を自分で検索できます。しかし、デザイン案のpxをremに変換するには、手作業で計算する必要があり、非常に時間と手間がかかります。 (怠惰を許してください~)

1. CSS プロセッサ

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

Sass (Sass 関数と mixin マクロを使用して実装):

@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 マクロを使用):

@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 - >) ; 設定 -> パッケージの参照);

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 を使用してマイクロサイトを添付します。モバイル端末のデバイスアダプテーションを実装します。