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

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

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

这里举例为  640/20 = 32rem

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

200/20 = 16px;

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

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

这样就完了啦

如何把设计稿中px值转化为想要的rem值的更多相关文章

  1. React Native不同设备分辨率适配和设计稿尺寸单位px的适配

    React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...

  2. 学习笔记：只有一套app设计稿（5s尺寸）切出4和4s尺寸以及安卓系统主流尺寸的图

    如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图 转自:http://www.zhihu.com/question/23255417   版权归原作者所有 目前ios手机 ...

  3. UI设计中px、pt、ppi、dpi、dp、sp之间的关系

    UI设计中px.pt.ppi.dpi.dp.sp之间的关系 武汉AAA数字艺术教育 2015-07-24 14:19:50 职业教育 pi px 阅读(3398) 评论(0) 声明:本文由入驻搜狐公众 ...

  4. 前端切图实战（PSD设计稿转化为前端）

    课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...

  5. 根据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的更节点添加font-size 值.使用mediaquery 可以解决这个问题,但是每一个文件都引用一 ...

  6. 依据iPhone6设计稿动态计算rem值

    rem 单位在做移动端的h5开发的时候是最常常使用的单位. 为解决自适应的问题.我们须要动态的给文档的更节点加入font-size 值.使用mediaquery 能够解决问题,可是每个文件都引用一大串 ...

  7. 三、taro路由及设计稿及尺寸单位

    一.路由配置 路由配置跟小程序一样,在入口文件的 config 配置中指定好 pages 通过taro API 跳转,详见导航 // 跳转到目的页面,打开新页面 Taro.navigateTo({ u ...

  8. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  9. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

随机推荐

  1. Windows下安装MySQL（解压版本）

    解压缩 将下载到的文件解压缩到自己喜欢的位置,例如我自己的位置是D:\Program Files\mysql-5.7.10-winx64 添加环境变量 右键计算机->属性->高级系统设置- ...

  2. 思想者：漫谈大学生的四个LEARN

     核心提示:哪四个Learn呢?Learn to learn(学习怎样学习),Learn to be(学习怎样做人),Learn to do(学习怎样做事),Learn totogether(学习 ...

  3. poj1548Robots dfs实践

    //搜索每一行 //该生产线的整点已被清除 //然后位置,然后转移到下一个步走的最后一点 //然后,所有点的下面一行清晰 //然后重复上面的操作 #include<iostream> #i ...

  4. Hibernate入门配置案例

    Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自动生成SQL语句,自 ...

  5. angular form set dynamic control(form动态设置control)

    实现效果 form表单控件的实时更新 效果如图 关键代码 validateForm: FormGroup; // 表单校验 constructor( private fb: FormBuilder ) ...

  6. 使用 NodeJS + Express从GET/POST Request 取值

    过去无论哪一种网站应用程式的开发语言,初学者教学中第一次会提到的起手式,八九不离十就是GET/POST Request 的取值.但是,在Node.js + Express 的世界中,仿佛人人是高手,天 ...

  7. StackLayout

    堆栈式地放置内容可以在xaml中完成视图,也可以在cs代码中完成视图 Xamarin的所有视图和布局都是可以 1.在xaml中完成 2.在cs代码中完成视图 (类比WPF) 示例 在cs代码中完成视图 ...

  8. main()如果返回0，则代表程序正常退出，返回非零代表程序异常退出。

    读到这里,大家应该了解了main函数返回值的来龙去脉了.下面介绍一下main函数返回值的作用以及如何获得这个返回值.main函数的返回值用于说明程序的退出状态.如果返回0,则代表程序正常退出.返回其它 ...

  9. 如何快速生成数据文件（fsutil命令，使用CreateFile和SetEndOfFile API函数，fopen和fseek RTL函数）

    1. fsutil 命令 文件会瞬间生成,因为实际上Windows只是分配了名称.地址和空间给该文件,并没有读写任何文件内容 100M=1024x1024x100 fsutil file create ...

  10. 【Ubuntu】查看进程端口占用信息

    1.查看进程信息 ①进程查看 ps -aux ②根据PID查看进程 ps -aux | grep pid ③进程计数,查看指定进程 ps -aux | wc -l ps -aux | grep kwo ...