px2rem.scss

Self adaption plugin for mobile development.

Install

npm install px2rem.scss --save

Usage

In html <head> tag, add viewport and designBaseWidth,as below：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>demo</title>
  <script>
    var designBaseWidth = 375
  </script>
</head>

import px2rem.config.min.js file,

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>demo</title>
  <script>
    var designBaseWidth = 375
  </script>
  <script src="https://unpkg.com/px2rem.scss"></script>
</head>

Notice: this plugin need calculate the html tag base font-size before dom rendering, otherwise web page will initial depend on font-size:16px to calculate rem value, this will cause page to rerender and repain.

Before you use mixins in px2rem.scss, plz import firstly：

@import 'path/to/px2rem.scss';
html {
  @include font-dpr(16px);
  @include px2rem(width, 320px);
}

Remarks

px2rem.scss provide two sass mixin：

font-dpr - calculate font size
px2rem - convert px to rem

Notice：The default base font size is 16px for html.

License

MIT