rem使用方法:

rem ，root element,即相对于根元素的大小，浏览器默认字符大小为16px，此时1rem相当于16px.

 方法1 设置font-size:

body{
   font-size: 62.5%;}

1em则=16px*62.5%=10px,1.2em则=12px

 

方法2 使用less或则scss的方式：

若设计稿的宽度为750px,屏宽375px，相对rem为750/2/16rem,若设置默认字符大小25px；则一个元素相对rem为width/50;less中使@r为50rem可简化计算

1 :javascript:

 

2: less中写入宽度：

@r:50rem;p{
       width: 320/@r;}

3：编译后：

p {
     width: 6.4rem;}

scss写法：

2: scss中写入宽度：

@function t($px) {
       @return $px / 50px * 1rem;}p {
       width: t(20px);}

 

1 Hbuilder 中自动编译 less:

(1)  首先在node中全局安装less:npm install less -g

(2) hbuilder中打开 工具-预编译-less-编辑-智能完成

(3) 现在保存ctrl+s即可自动编译less文件

 2 sublime安装less插件：

1 首先node下全局安装less:npm install less -g

    lessc命令可编译less文件

2 然后sublime安装less插件：ctrl+shift+p>install Package>输入less+Enter 

    支持less高亮

3 安装将less转换为css的less2Css:ctrl+shift+p>install Package>输入less2css+Enter

4 cmd下安装less-plugin-clean-css插件: npm install less-plugin-clean-css -g

然后less文件保存会自动生成css文件

 

tips:

1:发现如果容器没有设置高度，则相同rem值，显示的字符大小有差异，未设置容器高度字符偏大