Skip to content

Latest commit

 

History

History
69 lines (50 loc) · 1.68 KB

README.md

File metadata and controls

69 lines (50 loc) · 1.68 KB
Raw

px2rem.scss

Downloads Version

Self adaption plugin for mobile development.

Install

npm install px2rem.scss --save

Usage

  1. 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>
  1. 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.

  1. 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