首先我们需要的是把尺寸转化为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. 简明Python3教程(A Byte of Python 3)

    关键字:[A Byte of Python v1.92(for Python 3.0)] [A Byte of Python3] 简明Python教程 Python教程 简明Python3教程  简明 ...

  2. 编程算法 - 旋转矩阵 代码(C)

    旋转矩阵 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 输出旋转矩阵, 使矩阵是按对角线螺旋上升, 在输出规则确定以后, 就能够推断, 上升规律是, ...

  3. Bootstrap Thumbnail

    Square Thumbnail with Image <!-- Square Thumbnail with Image --> <com.beardedhen.androidboo ...

  4. Matlab随笔之模拟退火算法

    问题描述: 我方有一个基地,经度和纬度为( 70,40).假设我方飞机的速度为 1000 公里/小时. 我方派一架飞机从基地出发,侦察完敌方所有目标,再返回原来的基地.在敌方每一目 标点的侦察时间不计 ...

  5. WPF － 模板查看工具：Show Me The Template及如何查看第三方主题

    原文:WPF - 模板查看工具:Show Me The Template及如何查看第三方主题 在学习WPF的模板(DataTemplate.ItemsPanelTemplate.ControlTemp ...

  6. Effection Go

    Introduction: 新语言, 新思维 Formatting Indentation: 默认tab Line Length: 无限制, 会自动换行 Parentheses: 圆括号, 无限制, ...

  7. EF相关报错

    EF7无法找寻依赖问题解决方案 现象:使用EF7的过程中,任何"dnx . XXX"的都会报错,提示"cannot resolve dependencies for ta ...

  8. 利用winIO3.0进行windows10 64bit端口读取

    一.winIO介绍 WinIO程序库允许在32位的Windows应用程序中直接对I/O端口和物理内存进行存取操作.通过使用一种内核模式的设备驱动器和其它几种底层编程技巧,它绕过了Windows系统的保 ...

  9. PHP提取字符串中的图片地址

    PHP提取字符串中的图片地址 $str='<p><img border="0" src="upfiles/2009/07/1246430143_1.jp ...

  10. 微信小程序把玩（三十三）Record API

    原文:微信小程序把玩(三十三)Record API 其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道是不是因为电脑测试的原因,只能等公测或者等他们 ...