px rem 转换的几种方法(分辨率字体调整)
2016-06-19 15:43
387 查看
目前(2016-06-19)px转rem 的工具已经不少了。下面介绍几个转换的方案。
转换方式1: 使用 在线-px转rem
在线 px 转换 rem 工具地址:http://520ued.com/tools/rem
转换方式2: 使用 sublime text 3 rem插件自动转换。
效果如下:
使用步骤
1、下载插件 https://github.com/hyb628/cssrem.git
2、进入packages目录:Sublime Text 3 编辑器 -> Preferences -> Browse Packages…
然后点击打开,将下载好的 cssrem 文件放入其中,重启Sublime Text即可。
配置参数(可选)
参数配置文件: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
具体的比例参数还是看个人平时切图怎么设置参数为准。
3、重启Sublime Text。
转换方式3: 使用node Grunt 来执行转换。
请移步:http://www.tuicool.com/articles/3EbYFv
转换方式4: 常用设置转换。
1.针对设计稿 计算rem
所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ,但是 1:16 的比例不方便计算。
在这里文档元素设置 font-size: 62.5%,可以很方便的利用十进制进行计算了,(CSS 预处理工具可以使用默认值)
所以如果我有一个宽度为640的设计稿,通过上面的方法算出对应元素rem的大小 。
(附注:实际项目不可以设置成 font-size: 62.5%,因为chrome不支持小于12px的字体,计算小于12px的时候,会默认取12px去计算,导致chrome的rem计算不准确)
2。针对不同分辨率计算font-size
监听浏览器更改 html的font-size
配合css预处理工具计算 rem 值。 Sass、LESS 、Stylus
5、js 处理响应式 px 转换 rem
好处就是兼容性完美,缺点是网络请求超慢的时候,所有东西都会放大再缩小,会出现闪屏!
6、px 转换 rem 工具(– 热心网友提供,非常感谢 –)
链接地址:http://www.ofmonkey.com/tools/front#rem
转换方式1: 使用 在线-px转rem
在线 px 转换 rem 工具地址:http://520ued.com/tools/rem
转换方式2: 使用 sublime text 3 rem插件自动转换。
效果如下:
使用步骤
1、下载插件 https://github.com/hyb628/cssrem.git
2、进入packages目录:Sublime Text 3 编辑器 -> Preferences -> Browse Packages…
然后点击打开,将下载好的 cssrem 文件放入其中,重启Sublime Text即可。
配置参数(可选)
参数配置文件: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
具体的比例参数还是看个人平时切图怎么设置参数为准。
3、重启Sublime Text。
转换方式3: 使用node Grunt 来执行转换。
请移步: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
相关文章推荐
- GUI - Web前端开发框架
- 如何优雅地处理前端异常?
- WEB前端开发都应知道的jquery小技巧及jquery三个简写
- 前端开发过程中浏览器版本的两种判定方法
- Bootstrap每天必学之前端开发框架
- 直接拿来用的15个jQuery代码片段
- 10个很棒的jQuery代码片段
- 前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
- 前端开发必须知道的JS之闭包及应用
- Bootstrap前端开发案例一
- 18个非常棒的jQuery代码片段
- CSS Modules 详解及 React 中实践
- ReactJS组件间沟通的一些方法
- 深入解析 ES6 系列(二)
- [前端百科]UI设计师与前端工程师的区别
- 一个后端的前端学习之旅——1.决定学什么
- 一个后端的前端学习之旅——2.先搞定gulp
- 一个后端的前端学习之旅——3.喜闻乐见的跨域问题
- 一个后端的前端学习之旅——4.第一个demo上线以及关于前端框架我的看法