CSS px가 자동으로 rem으로 변환됩니다.

프론트엔드 개발자로서, 특히 모바일 단말 적응 작업을 할 때 rem은 우리가 자주 사용하는 단위인데, 온라인에서 검색하면 많은 장점이 있습니다.
하지만 디자인 초안의 px를 rem으로 변환할 때 이를 수동으로 계산해야 합니다. 이는 매우 시간이 많이 걸리고 힘든 과정입니다. (게으름을 용서하세요~)

1. CSS 프로세서

Sass, LESS, PostCSS 등의 프로세서가 모두 처리 가능합니다.

Sass(Sass의 함수 및 하이브리드 매크로를 사용하여 구현됨):

@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 - > 환경 설정 -> 패키지 찾아보기)

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

참 편리하지 않나요? >마지막으로 첨부된 마이크로사이트입니다. 유연한

js

를 사용하여 모바일 장치 적응을 구현하세요.

위 내용은 CSS px가 자동으로 rem으로 변환됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!