移动端:UI图px单位转换rem单位的计算方法
简单说一下 em
em 单位是相对于父元素字体大小来去定的。比方说:
font-size:12px;
元素宽度是2em;
那么实际的宽度是 24px.(具体为什么,可以去查询资料,今天主讲rem)
简单说一下 rem
rem 是相对于根元素(html)字体大小来确定的。比方说:
宽度 字体
手机A: 320px 14px
手机B: 460px ?
为了能达到可以同等比的放大缩小,那么,可以进行很简单的运算:?=14*460/320
得到:?=20.125px;
UI图上的px转化成实际操作的rem计算方法
- 第一步:设计标签的基准值,随意,想定多少定多少。随意定:20px
- 第二步:看看UI同事给你的图,宽度是多少?一般UI给图都是会给大一点,因为大图切下来,当屏幕小点,不会失真,但是小图要是放大了,就不太好看了。。。比方说,
一张图 宽度749px 高度234px; 你的浏览器模拟器以iphone6来定基,也就是宽度为375px;
那么根据等比例缩放,你的模拟器高度为h=375*234/749=117.1562px
那么实际的rem的计算值为:
宽度:375/20 = 18.75rem
高度: 117.1562/20 = 5.8578rem;
- 第三步: 开始进行换算。实际是不同屏幕宽度,只要变换根元素的font-size,即可调整所有的元素宽高显示。而这个,只能通过js来实现
基准屏幕 真实屏幕
宽度 375px clientWidth
字体 20px ?
js代码:
window.onload = function(){
document.documentElement.style.fontSize = 20*document.documentElement.clientWidth/375 + 'px'
}
- 第四步:检验你的页面。
题外话
现在有很多可以直接计算rem值的插件,不用你每次宽高都去算一下,不然那样是会活不下去的。具体实现可以看这篇文章https://www.cnblogs.com/jf-67/p/7171830.html
移动端:UI图px单位转换rem单位的计算方法的更多相关文章
- vue换算单位px自动转换rem
cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...
- 自动把网页px单位转换成rem
自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果
- 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...
- 移动端rem单位和px单位换算
rem单位是根据html元素的单位在页面根据不同的手机屏幕分辨率动态整体的按比例缩小或放大字体. 假如html{font-size: 14px;},那么1rem=14px; 一个div宽度48px,那 ...
- gulp.spritesmith修改px为rem单位
移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...
- [转]彻底弄懂css中单位px和em,rem的区别
难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- 移动端rem单位用法[转]
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
随机推荐
- Java GC基础
Java的垃圾回收机制负责回收无用对象占据的内存资源,但是有特殊情况:假定对象不是使用new关键字获得了一块儿“特殊”的内存区域,
- Json和序列化总结
一.序言 遇到问题,就经常逛园,不知你是否曾有,曾经遇到的问题,或者在园子里看到问题的方案,过一段时间,有可能还会摔跤,哈哈...大神请勿喷,小弟记忆不太好,还过来找资料,如果自己写把问题或某个知识点 ...
- 【经验总结】OSG 安装配置
对于普通用户推荐直接下载安装包配置.如有特殊需求或想了解编译过程可参考网上文章自己编译后配置.(通常建议使用第一种方法即可) 本人安装经验: 失败:自己系统64位,VS2010 32位,开始自己动手编 ...
- webapi参数处理get过个参数
// GET api/values/5 [HttpGet("{logInName}/{pwd}/{orgId}")] public LogInOutPut Get(string l ...
- 推荐一个高大上的网易云音乐命令行播放工具:musicbox
网易云音乐上有很多适合程序猿的歌单,但是今天文章介绍的不是这些适合程序员工作时听的歌,而是一个用Python开发的开源播放器,专门适用于网易云音乐的播放.这个播放器的名称为MusicBox, 特色是用 ...
- 如何在Ubuntu里安装Helm
Helm是什么?在战网上玩过暗黑破坏神2代的程序员们应该还记得,Helm是国度的意思. 而在计算机领域,Helm是什么? Helm是Kubernetes的一个包管理工具,有点像nodejs的npm,U ...
- Git 版本控制系统的基本使用、常用操作
以Ubuntu16.04操作系统为例(其他系统类似),主要记录常用的.基本操作: 0. 安装Git 分散型版本控制系统(CVS): sudo apt-get install git 1. 初始化本地配 ...
- About App Sandbox
沙盒是在受限的安全环境中运行应用程序的一种做法,这种做法是要限制授予应用程序的代码访问权限. 沙盒技术提供对资源的严格控制,沙盒通过限制对内存.系统文件和设置的访问,沙盒可以让企业可通过执行潜在恶意代 ...
- 聊天室(C++客户端+Pyhton服务器)3.群功能添加
创建群 数据库 group_table(user, name) grpuser_table(grpname,user) 按下添加群按钮 // 创建群组void CUserDialog::OnBnCli ...
- uva1614 Hell on the Markets
贪心部分的理论依据:前i个数可以凑出1-sum[i]的所有整数. 证明:第二类数学归纳,n=1时成立,假设n=k之前所有项都成立,当n=k+1时.sum[k+1]=sum[k]+a[k+1].只需证明 ...