px2rem.scss
Self adaption plugin for mobile development.
Install
npm install px2rem.scss --save
Usage
- In html
<head>tag, addviewportanddesignBaseWidth,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.jsfile,
<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-sizebefore dom rendering, otherwise web page will initial depend onfont-size:16pxto calculateremvalue, this will cause page to rerender and repain.
- Before you use
mixinsinpx2rem.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
16pxfor html.
License
MIT