px转换成rem的工具指南

现在有工具进行转换我们可以不需要去心算各种单位了,切图的时候直接用px,然后页面切完后,将样式丢到工具中进行转换,秒秒中就能把样式中所有px单位转成rem。

第一步:页面加入根元素计算JS代码

(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 = 100 * (clientWidth / 320) + ‘px‘;
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

  

第二步:将你写好的CSS文件丢入工具进行转换

在这里要解释下为什么对border的各种属性不进行处理,因为border在安卓下使用rem单位的支持性特别差,你可能写2rem或者3rem都没用默认会变成1px,所以在使用border属性时很多时候不建议处理border。

工具地址:http://520ued.com/tools/rem

时间: 2024-10-29 04:03:53

px转换成rem的工具指南的相关文章

单位px 转换成 rem

$(function(){ //设置rem function mobile(){ var size=100, //规定rem与px之间值的转换 maxWidth =750; //设置基准宽度. ratio = function(){ var r = document.documentElement.clientWidth / maxWidth; return r>=1?1:r<=0.234?0.234:r; }; set = function(){ document.documentEleme

JS判断移动端还是PC、移动端px转换成rem、移动端圆角

判断PC还是移动if(/AppleWebKit.Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf(

使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem

有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在写rem数值的时候,都需要对设计图原始的px值进行一番换算. 有没有工具可以辅助我们自动进行计算,我只要写px值就好了呢?当然是有的,编辑器其实就可以配置插件来对数值进行换算.但是有时候,我们在使用一些第三方ui库时,也想要对他们的px值进行转换,该怎么办呢? 当当当当,来介绍一下两个好朋友,postcss-pxtorem 和 lib-flexible ,安装配置这两个依赖,我们就可以

知乎大V推荐之免费PDF转换成Word在线工具

在前面的教程里面我们介绍过如何使用PDF转换器来将PDF转换成Word,不过由于需要注册使用,对于大部分仅仅只是偶尔需要用到的网友来说,可能并不是非常有必要.再者,简简单单的文件格式转换,也不需要用到那么专业的文件格式转换器,对吧? 接下来我们要介绍的,就是一款知乎大V经常使用的在线PDF转换工具,功能可丝毫不逊色与专业的文件格式转换器哦. 使用简介 迅捷PDF在线转换器不需要下载安装包,可以直接在网页上进行转换.使用的时候甚至连注册都不需要,就已经可以实现转换了.你可以想象一下,直接拖动文件就

Vue开发中的移动端适配(px转换成vw)

1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced -S (开发.运行都依赖) postcss-aspect-ratio-mini postcss-px-to-viewportpostcss-write-svgpostcss-cssnextcssnanopostcss-viewport-units 3.配置  .postcssrc.js module.

[原创] 迅雷快车旋风链接转换成普通链接工具

如图,基于Base64Converter 迅雷将普通链接前面加上AA,后面加上ZZ,然后Base64Encode后前面加上thunder:// 快车将普通链接前后加上[FLASHGET],然后Base64Encode后前面加上flashget://,如有需要后面&应该是id 超级旋风将普通链接Base64Encode后,前面加上qqdl:// 源码

将JSON转换成MAP的工具类

package com.xxxx.util; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.net.URL; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.List; import ja

怎样将pdf转换成word文档

怎样将pdf转换成word文档 从事办公文书的同学唠叨最近一段时间都在烦恼同一个问题,就是有大量的PDF文档需要操 作,工作量大的时候,忙得焦头烂额,甚至要还得加班才能赶完.当面对数量大的文档需要转换时,你该怎么办?小编给你推荐一款叫迅捷PDF转换成Word转 换器,简单的操作,就可以把文档完美转换哦,一起来看看怎么转换吧! PC版迅捷PDF转换成Word转换器: 这是一款操作简单,使用方便,效果极好的PDF转换成Word转换器工具,使用它,您可以将一个或多个文件PDF文件转换成想要的文本格式,

在线px转换rem工具

今天推荐一个在线工具,在线px转换rem工具 只要输入1rem = 多少px即可在线转换 和cssrem插件差不多的功能 rem在线转换工具: http://www.ofmonkey.com/front/rem 原文地址:https://www.cnblogs.com/zzz-knight/p/11657600.html