Home > Web Front-end > CSS Tutorial > css px automatically converted to rem

css px automatically converted to rem

PHPz
Release: 2017-04-04 13:40:32
Original
2493 people have browsed it

As a front-end developer, especially when doing mobile terminal adaptation, rem is a unit we often use. You can search for its benefits. There are many online.
But when we convert the px on the design draft into rem, we have to manually calculate it. This is a very time-consuming and laborious process. Is there any way to "liberate" us? (Forgive my laziness~)

1. CSS processor

Processors such as Sass, LESS and PostCSS can all handle it.

Sass (implemented using Sass’s functions and hybrid macros):
@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;
}
Copy after login
Sass (using Sass’s hybrid macros):
@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;
  }
}
Copy after login

For the above method, we have to learn additional writing rules such as sass, and also need to configure it. Although it is very simple, can it be simpler?

2.CSSREM

This is a plug-in written by flashlizi for sublime text. It is really convenient to use! We can see it on GitHub.

Let me introduce how to configure it:

2.1 We can download the dependent files on GitHub;
2.2 Open Sublime Text and enter the packages directory (Sublime Text - > Preferences -> Browse Packages);
2.3 Place the cssrem-master folder in the directory opened in the previous step, and restart sublime text to take effect;
我们也可以修改默认配置:
打开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"]
}
Copy after login

Actual test:
Create a new .css file:

css px automatically converted to rem

##11.png

Press the tab key to get the following results:

css px automatically converted to rem

22.png

Isn’t it very convenient? Come and try it~

Finally, attached Microsite—use flexible.

js to implement mobile device adaptation.

The above is the detailed content of css px automatically converted to rem. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template