首先我们需要的是把尺寸转化为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. Linux性能测试 命令大全

    Linux 系统出现问题时,我们不仅需要查看系统日志信息,而且还要使用大量的性能监测工 具来判断究竟是哪一部分(内存.CPU.硬盘……)出了问题.在 Linux 系统中,所有的运行 参数保存在虚拟目录 ...

  2. ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程，简单编程

    原文:ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 异常和错误处理 上一章节中,我们学习了 ASP.NET Cor ...

  3. Tinyhttpd - 超轻量型Http Server，使用C语言开发，全部代码只有502行(包括注释)，附带一个简单的Client（Qt也有很多第三方HTTP类）

    - 2. Tinyhttpd tinyhttpd是一个超轻量型Http Server,使用C语言开发,全部代码只有502行(包括注释),附带一个简单的Client,可以通过阅读这段代码理解一个 Htt ...

  4. crossplaform---Nodejs in Visual Studio Code 04.Swig模版

    1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...

  5. 伪随机数与采样（sampling）

    计算机本身是无法产生真正的随机数的,但是可以根据一定的算法产生伪随机数(pseudo-random numbers).最古老最简单的莫过于 Linear congruential generator: ...

  6. C ++ 17 技术上已经完成，C ++ 20 也在路上（有路线图）

    在前不久结束的冬季 ISO C ++标准会议(Kona)上,C ++ 17 宣布在技术上已完成,仅剩下一些 ISO 相关的繁文缛节,即将提交至最终的 ISO 投票表决.该会议由 Plum Hall 和 ...

  7. spring boot 使用 pageHelper插件

    按照github上的教程集成到spring boot pom文件引用需要改一下,教程的pom文件引用: 工程中要用以下方式 <!--分页--> <dependency> < ...

  8. MVC 添加数据的三种方法

    1 通过Request接收数据,进行添加 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<d ...

  9. jQuery省市联动

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  10. MyBatis 模板

    mybatis-config.xml: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE co ...