px rem 转换的几种方法(分辨率字体调整)

本是古典何须时尚 2022-09-21 11:55 610阅读 0赞

目前（2016-06-19）px转rem 的工具已经不少了。下面介绍几个转换的方案。

**转换方式1：　使用 在线-px转rem**

在线 px 转换 rem 工具地址：[http://520ued.com/tools/rem][http_520ued.com_tools_rem]

--------------------

**转换方式2： 使用 sublime text 3 rem插件自动转换。**  
　　  
**效果如下：**  
　  
　　![这里写图片描述][1655152121636501.gif]

**使用步骤**

1、下载插件 [https://github.com/hyb628/cssrem.git][https_github.com_hyb628_cssrem.git]  
　　  
　　2、进入packages目录：Sublime Text 3 编辑器 -> Preferences -> Browse Packages…  
　　  
然后点击打开，将下载好的 cssrem 文件放入其中，重启Sublime Text即可。

![这里写图片描述][20160727191147956]

**配置参数（可选）**

参数配置文件：Sublime Text3 -> Preferences -> Package Settings -> cssrem

px\_to\_rem - px转rem的单位比例，默认为40。  
　　　　  
　　　　max\_rem\_fraction\_length - px转rem的小数部分的最大长度。默认为6。  
　　　　  
　　　　available\_file\_types - 启用此插件的文件类型。默认为：\[“.css”, “.less”, “.sass”\]。  
　　　　  
　　　　我在配置文件 cssrem.sublime-settings里修改了单位比例为100  
　　　　  
　　　　具体的比例参数还是看个人平时切图怎么设置参数为准。

![这里写图片描述][20160619154037087]  
　　  
　　3、重启Sublime Text。

--------------------

**转换方式3： 使用node Grunt 来执行转换。**

请移步：[http://www.tuicool.com/articles/3EbYFv][http_www.tuicool.com_articles_3EbYFv]

--------------------

**转换方式4： 常用设置转换。**

**1.针对设计稿 计算rem**

所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ，但是 1:16 的比例不方便计算。

在这里文档元素设置 font-size: 62.5%，可以很方便的利用十进制进行计算了，（CSS 预处理工具可以使用默认值）

html { font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */}
    body { font-size: 1.4rem; /* 1.4 × 10px = 14px */}
    h1 { font-size: 2.4rem; /* 2.4 × 10px = 24px */}

所以如果我有一个宽度为640的设计稿，通过上面的方法算出对应元素rem的大小　。

（附注：实际项目不可以设置成 font-size: 62.5%,因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的rem计算不准确）

**2。针对不同分辨率计算font-size**

监听浏览器更改 html的font-size

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

配合css预处理工具计算 rem 值。 Sass、LESS 、Stylus

--------------------

**5、js 处理响应式 px 转换 rem**

~ function(desW) {
        var winW = document.documentElement.clientWidth;
        if(winW > desW) {
            var oMain = document.querySelector(".box");
            oMain.style.margin = "0 auto";
            oMain.style.width = desW + "px";
            return;
        }
        document.documentElement.style.fontSize = winW / desW * 100 + "px";
    }(640);

好处就是兼容性完美，缺点是网络请求超慢的时候，所有东西都会放大再缩小，会出现闪屏！

--------------------

**6、px 转换 rem 工具（– 热心网友提供，非常感谢 –）**

链接地址：[http://www.ofmonkey.com/tools/front\#rem][http_www.ofmonkey.com_tools_front_rem]

--------------------

[http_520ued.com_tools_rem]: http://520ued.com/tools/rem
[1655152121636501.gif]: http://img4.07net01.com/upload/images/2015/08/12/1655152121636501.gif
[https_github.com_hyb628_cssrem.git]: https://github.com/hyb628/cssrem.git
[20160727191147956]: /images/20220721/38d48234ee1b4176824de6dc1aa9b949.png
[20160619154037087]: /images/20220721/0e443d777ba64118bb1ca04738537455.png
[http_www.tuicool.com_articles_3EbYFv]: http://www.tuicool.com/articles/3EbYFv
[http_www.ofmonkey.com_tools_front_rem]: http://www.ofmonkey.com/tools/front#rem