首先我们需要的是把尺寸转化为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. EF codefirst第一篇

    一直以来喜欢dbfirst  因为简单,一直不明白为什么codefirst会是主流,根据对ddd的学习终于知道了codefirst的目的 本文是对博客园 小崔的笔记本 文章 EF实体框架之CodeFi ...

  2. [实时更新]jquery完整版下载

    jquery-2.1.0   注!不再支持IE 6/7/8 直接引用地址:  开发版地址1: <script src="http://code.jquery.com/jquery-2. ...

  3. 怎么快速构建自己的C/C++程序？——有关编译、静态链接和SCons

    怎么快速构建自己的C/C++程序?--有关编译.静态链接和SCons 1. 写在前面 最初写C++是在Visual Studio这个IDE里,那时我并没有makefile的概念,对程序的编译和链接的一 ...

  4. Android Intent传递对象摘要

    效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaG9uZ3NoZW5ncGVuZw==/font/5a6L5L2T/fontsize/400/fil ...

  5. C# WindowsPrincipal(Windows规则)的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Security.Principal;usin ...

  6. NOPI 基本读写

    //获取cell的数据,并设置为对应的数据类型 public object GetCellValue(ICell cell) { object value = null; try { if (cell ...

  7. PostgreSQL在win7上安装详细步骤

    原文:PostgreSQL在win7上安装详细步骤 PostgreSQL安装: 一.windows下安装过程 安装介质:postgresql-9.1.3-1-windows.exe(46M),安装过程 ...

  8. 遍历所有的XML

    XmlElement rootElement = doc.DocumentElement; foreach (XmlElement childElement in rootElement) { //C ...

  9. 搭建RPC over HTTP 环境遇到的问题

    最近需要做RPC的IPS协议分析,需要了解一下RPC over HTTP的协议格式,由于此类数据包不易构造,故此想搭建一个抓一些包分析一下. 结果搭建这么个环境硬是用了我四个工作日的时间,崩溃加无语. ...

  10. 初次比较正式的IT职场面试后几点对自己web开发的思考

    昨天晚上参加一个web开发面试,对于还没有真正毕业的自己来说,web开发的面试不是第一次,暑假就面试几家公司,前几次的面试并没有发现自己对自己学习的专业知识有什么学习态度的问题,因为前几次的面试官都是 ...