还在发愁布局问题？javascript
再不用smart-rem，可能就out了。这是一个能够自动计算rem的代码库，它适用于全部主流开发环境：css
浏览器环境html
vue框架vue
react框架java
angular框架react
nuxt框架npm
next框架浏览器
英文版介绍bash
各类环境的用法分列以下：框架
第一步:
在html文件中
<script src="./smart-rem.js"></script>
复制代码
第二步:
在html文件中
<script>
smartRem(Arguments)
</script>
复制代码
注释: 参数是设计稿的宽度。若是设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法以下：
smartRem(750)
复制代码
第三步:
在css文件中
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
复制代码
注释:若是元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单以下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
复制代码
第一步:
npm install smart-rem -S
复制代码
第二步:
在文件 src/main.js 中
import smartRem from 'smart-rem'
smartRem(Arguments)
复制代码
注释: 参数是设计稿的宽度。若是设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法以下：
smartRem(750)
复制代码
第三步:
在文件 src/*.vue 中
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
复制代码
注释:若是元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单以下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
复制代码
第一步:
npm install smart-rem -S
复制代码
第二步:
在文件 src/index.js 中
import smartRem from 'smart-rem'
smartRem(Arguments)
复制代码
注释: 参数是设计稿的宽度。若是设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法以下：
smartRem(750)
复制代码
第三步:
在文件 src/*.css 中
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
复制代码
注释:若是元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单以下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
复制代码
第一步:
npm install smart-rem -S
复制代码
第二步:
在文件 src/main.ts 中
import smartRem from 'smart-rem'
smartRem(Arguments)
复制代码
Notes:参数是设计稿的宽度。若是设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法以下：
smartRem(750)
复制代码
第三步:
在文件 src/**/*.styl 中
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
复制代码
注释:若是元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单以下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
复制代码
第一步:
npm install smart-rem -S
复制代码
第二步:
在文件 nuxt.config.js中，在head中添加script，操做以下：
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
// ** 开始添加 ** //
script: [
{
innerHTML: require('smart-rem') + 'smartRem(Arguments)',
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
// ** 结束添加 **//
},
复制代码
注释:参数是设计稿的宽度。若是设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法以下：
'smartRem(750)'
复制代码
第三步:
pages/*.vue,
components/*.vue,
layouts/*.vue.
在以上文件中，写法以下
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
复制代码
注释:若是元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单以下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
复制代码
第一步:
npm install smart-rem -S
复制代码
第二步:
建立一个文件 pages/_document.js ，添加以下内容：
// 提醒：_document 只在服务端渲染，不在客户端渲染，相似onClick的回调函数不能在此添加
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<html>
<Head>
<style>{`body { margin: 0 } /* custom! */`}</style>
// ** 开始添加 ** //
<script dangerouslySetInnerHTML={{__html: require('smart-rem') + 'smartRem(Arguments)'}}></script>
// ** 结束添加 ** //
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</html>
)
}
}
复制代码
注释:参数是设计稿的宽度。若是设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法以下：
'smartRem(750)'
复制代码
第三步:
在文件 pages/*.js 中，书写以下：
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
复制代码
注释:若是元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单以下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
复制代码
其它：
若是你已经使用过代码编辑器插件cssrem，你能够作如下设置：
在VSCode中，把Root Font Size的值设置为100
在Sublime中，把px_to_rem的值设置为100
若是你已经使用过开发依赖包postcss-pxtorem，你能够将rootValue值设为100
举起手手点赞的人，注意下，我看到了你的内涵