rem是怎么计算的(转载)
「rem」是指根元素(root element,html)的字体大小,从遥远的 IE6 到版本到 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。
rem是通过根元素进行适配的,网页中的根元素指的是html,我们通过设置html的字体大小就可以控制rem的大小(另一个 相对单位 em(font size of the element)是指相对于父元素的字体大小的单位。),
所以1rem*16(这个是html的fontsize)=16px;
2rem*16=32px;
要想让rem和px成100倍的关系,即1rem*100=100px;则html的字体大小就应该是100px;
所以我们一般在js中做判断:
<script>
(function(){var a=document.documentElement.clientWidth||document.body.clientWidth;if(a>460){a=460}else{if(a<320){a=320}}document.documentElement.style.fontSize=(a/7.5)*1+"px"})();
</script>
- 如果是750px的设计稿,但是手机是375px的屏幕:
对应750的设计稿 视觉稿测量100px-->1rem
375屏幕手机(是750的一半) 页面显示为 50px-->1rem
所以1rem和px对应关系是 50倍 对于 : 屏幕宽度/7.5=375/7.5=50px ;
这样1rem*50=50px(50px是375屏幕上的长度,相当于750上的100px);
============================================================
- 如果是375px的设计稿,手机是375px的屏幕:
对应375的设计稿 视觉稿测量100px-->1rem
375屏幕手机 页面显示为 100px-->1rem
所以1rem和px对应关系是100倍 对于: (屏幕宽度/7.5)*2=(375/7.5)*2=100px ;
这样1rem*100=100px(100px是375屏幕上的长度,相当于350上的100px);
============================================================
综上所述,对于750的设计稿,375的手机和设计稿是50%的关系,所以设计稿上100px,
- 对应着375手机上的50px;也就是1rem对应着50px;
document.documentElement.style.fontSize=(a/7.5)*1+"px"
- 对于375的设计稿,375的手机和设计稿是100%的关系,所以设计稿上100px,
对应着375手机上的100px;也就是1rem对应着100px;
document.documentElement.style.fontSize=(a/7.5)*2+"px"
文章转载自:https://www.cnblogs.com/xiaozhumaopao/p/8260447.html
rem是怎么计算的(转载)的更多相关文章
- Rem与Px的转换[转载]
原文:http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html rem是CSS3中新增加的一个单位 ...
- (淘宝无限适配)手机端rem布局详解(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- 利用蒙特卡洛(Monte Carlo)方法计算π值[ 转载]
部分转载自:https://blog.csdn.net/daniel960601/article/details/79121055 圆周率π是一个无理数,没有任何一个精确公式能够计算π值,π的计算只能 ...
- Fluent批处理之--windows下多个任务的计算 【转载】
转载自http://jingcao830828.blog.163.com/blog/static/10320833620103633624506/ 1.同维多任务的连续计算 对于工程应用来说,计算精度 ...
- rem是怎么计算的
「rem」是指根元素(root element,html)的字体大小,从遥远的 IE6 到版本到 Chrome 他们都约好了,根元素默认的 font-size 都是 16px. rem是通过根元素进行 ...
- 为什么GPU可以用于科学计算【转载】
转自:https://blog.csdn.net/xihuanyuye/article/details/81178352 https://www.zhihu.com/question/35063258 ...
- h.264的POC计算(转载)
转自:http://www.cnblogs.com/TaigaCon/p/3551001.html 本文参考自http://wenku.baidu.com/link?url=ZPF0iSKzwLQg_ ...
- 转载文章CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- Sass基础——Rem与Px的转换
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...
随机推荐
- PYQT5登录界面跳转主界面方法
该问题,有很多种方法,但是很多方法要么这个有问题,要么那个有问题,最后终于找到一种没问题的方法.记录一下: 参考地址:https://www.jianshu.com/p/d18ff36a78d6?fr ...
- [认证授权] 4.OIDC(OpenId Connect)身份认证(核心部分)
1 什么是OIDC? 看一下官方的介绍(http://openid.net/connect/): OpenID Connect 1.0 is a simple identity layer on to ...
- iOS 使用Instruments的工具小结
使用Instruments的工具 iOSXcodeInstrumentsInstruments是一个官方提供的强大的性能调试工具集. 1.Blank(空模板):创建一个空的模板,可以从Library库 ...
- linux 基本命令2
linux没有磁盘的概念,这一点不同于windows,Linux所有的文件系统采用树的结构完成(核心本质)树自然有根节点 也就是linux存在一个根目录,用/表示ls 表示查看命令 我们使用 ls / ...
- 我的工具:Db SQL Monitor
SQL Monitor 是一款界面简洁.绿色小巧的sql活动监视器,它能够帮助用户对 SQL Server 运行进程和Job进行实时监视,您可以查看当前执行的SQL/命令并终止. 工具下载地址:htt ...
- Fedora中安装VMtools步骤
第一次玩Fedora的系统,通过VMware工具安装的一个虚拟机,由于公司要求尽可能的留有足够空间,所以安装的时候就没选开发环境选项.安装成功后,又要准备安装VMware--tools工具,在此记录安 ...
- js中对象引用出现的问题
先看一个特别不符合直觉的代码 <script type="text/javascript"> var a = [1,2,3,4]; var b = [1,2,3,4]; ...
- Windows 下使用 工具修改文件的 时间
1. 下载工具 https://www.cr173.com/soft/12992.html 2. 使用工具修改即可 3. 忘记了东西处理挺方便的. 尤其是往前改日期的时候.
- plus调用android原生页面
var main = plus.android.runtimeMainActivity(); var Intent = plus.android.importClass("android.c ...
- MVC EF 移除建表时自动加上s的复数形式
移除建表时自动加上s的复数形式 public class DBContext : DbContext { public DBContext() : base("name=DBContext& ...