移动端px转rem的两种方法

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:

        <script>
            (function() {
                var html = document.documentElement;
                var hWidth = html.getBoundingClientRect().width;//根据屏宽调节大小
                //                console.log( hWidth );
                html.style.fontSize = hWidth / 15 + "px";//设置默认字符大小 25
            })()
        </script>

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值，显示的字符大小有差异，未设置容器高度字符偏大