如何把设计稿中px值转化为想要的rem值

首先我们需要的是把尺寸转化为rem值

假如设计稿中的是 200px*200px的图片移动端的设计图尺寸一般是640*750;

第一步. 把图片分为若干份(好算即可),每一份的大小就是rem的单位

这里举例为 640/20 = 32rem

第二步. 把设计图测量出来的尺寸转化为rem值

200/20 = 16px;

所以把当前的html的font-size调整为16px; 即可

3.在不同的设备中我们只需要去动态的设置html的font--size = 设备宽度/20

这样就完了啦

posted on 2019-06-21 10:40 blankOne 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/blankOne/p/11063214.html

如何把设计稿中px值转化为想要的rem值相关推荐

【原】设计稿中字体pt与px之间的转化
通常,设计网页时,字体一般会使用像素(px)或者倍数(em).某一天开始重构页面,用PS打开设计师给过来的稿子,开始切图,在查看文字时,发现字体大小是用pt来设置的,⊙﹏⊙b汗,如下图: 为了解pt和 ...
ui设计移动端字体适配_UI设计稿中常见的单位及移动端适配
一.pt 在我们的设计稿中,经常看到以pt单位来标注的稿子,那么pt究竟是个什么单位?其实pt是用于印刷行业用来表示字体大小的单位,也叫做磅,用过word设置字体的应该不会陌生,它是一个绝对长度,为1 ...
代码更换ui图片_用技术的方式，在UI设计稿中设置随机码，保证高清
本文首发于:行者AI 在工作中会遇到批量给图片添加文字,随机码等需求,当数据码数量较大时,UI的工作量就会非常大,这时候我们可以用python来帮我们提高工作效率. 1. 需求分析我们有这样一张图片 ...
java long初始化_java中long类型的变量想要初始化其值为空，要怎么实现？
展开全部 Long long=null. 基本语法编写Java程序时,应注意以下几点:大小写敏感:32313133353236313431303231363533e78988e69d83313333 ...
React Native不同设备分辨率适配和设计稿尺寸单位px的适配
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...
Android应用开发——从设计稿到手机屏幕的UI尺寸转换
情景导入假设我们需要将这个计算器UI界面设计到1080*2340,440dpi(pixel 5)上,我们如何求每个控件的dp值? 数学建模 1:获取设计稿中控件的px值 QQ截图可以获取设计稿px值 ...
doxygen 无法生成图片_设计稿智能生成代码如何识别组件？Imgcook 3.0 解析
文 / 阿里淘系 F(x) Team - 苏川背景介绍 imgcook 能够自动生成代码主要做两件事: 从视觉稿中识别信息,然后将这些信息表达成代码. 本质是通过设计工具插件从设计稿中提取 JSON ...
从网易与淘宝的font-size思考前端设计稿与工作流
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...
设计稿自动生成可用页面的展望
这篇文章只打算描述我加入支付宝之后,在设计稿生成代码这个方向上自己做的尝试和看到的团队中的尝试.不谈行业历史,不争论方向.文章以现状的形成和我的想法演进为主脉络,文末会提到我所看到的新契机.所以读者如 ...

如何把设计稿中px值转化为想要的rem值

如何把设计稿中px值转化为想要的rem值相关推荐

最新文章

热门文章