根据设计稿设置rem大小，elementUI px转rem

rem大小的设置并没有绝对的标准，按照自己喜好来即可，确定好1rem需要代表设计稿多少像素即可，以下以设计稿1920为例，期望效果：1rem对应设计稿10px，分辨率1920下html字体大小为10px，192rem = 1920px，根据当前屏幕大小和设计稿比例计算根元素字体大小

(function px2rem(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth)return;//设计稿为1920*1080，根据当前屏幕和审计稿比例设置根元素字体，为方便设置，系数乘以10，parseInt解决部分设备渲染字体发虚情况，1rem 对应设计稿10pxdocEl.style.fontSize = parseInt((clientWidth * 10 / 1920).toFixed(4) * 1) + 'px';window.ROOT_BASE_FONTSIZE = parseInt((clientWidth * 10 / 1920).toFixed(4)) * 1;};recalc();if (!doc.addEventListener)return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

使用vscode插件px to rem，设置设计稿大小为1920，根元素字体为10px，再到elementUI的css文件执行Alt+z即可，这个时候input的高度变为4rem，对应40px，如果是用在平板、移动端需要进行放大效果才比较好，毕竟1920的设计稿到375的iPhone上显示，等于缩小了5倍，和设计稿比例相差太大显示效果是不好的，根据实际情况调整。

根据设计稿设置rem大小，elementUI px转rem相关推荐

css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
android 文字大小设计,为什么设计稿的文字大小和开发的不一致
原因分析分析客户端眼中的行高首先我们要知道文字的几个属性,一般有以下几个 • ascent:基准线到文字最高处的推荐距离 • desent:基准线到文字最低处的推荐距离 • baseline:基 ...
【原】设计稿中字体pt与px之间的转化
通常,设计网页时,字体一般会使用像素(px)或者倍数(em).某一天开始重构页面,用PS打开设计师给过来的稿子,开始切图,在查看文字时,发现字体大小是用pt来设置的,⊙﹏⊙b汗,如下图: 为了解pt和 ...
设计稿是750px时的,rem设置
<script>+ function() {remLayout();function remLayout() {var w = document.documentElement.clien ...
移动开发之设计稿转换页面单位尺寸
在写这篇文章之前,我询问了在唯品会和腾讯的童鞋.以及公司里面前端大神(深哥),对于设计稿切图的详细方法,经过对比验证,得出设计稿转换页面单位尺寸方法步骤.我分别询问下面四个问题: 1. 设计稿的单位是 ...
如何把设计稿中px值转化为想要的rem值
如何把设计稿中px值转化为想要的rem值首先我们需要的是把尺寸转化为rem值假如设计稿中的是 200px*200px的图片移动端的设计图尺寸一般是640*750; 第一步. 把图片分为若干份 ...
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
移动端根据设计稿宽度适配 px转换相对单位rem
为了计算方便,一般建议 1rem = 100px(设计稿px),要换算这样的比例需要设置html对应的fontSize,计算规则如下: fontSize = 屏幕宽度 / 设计稿宽度 * 基本宽度如 ...
html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...

根据设计稿设置rem大小，elementUI px转rem

根据设计稿设置rem大小，elementUI px转rem相关推荐

最新文章

热门文章