背景

如何按照设计稿中标注的尺寸,直接写页面的样式,不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理,这个问题的答案超级简单。

根字体大小计算核心原理


设备的根字体大小 * 全屏比例值 =  设备的宽度

设计稿的根字体大小 * 全屏比例值 = 设计稿的宽度

这两个等式中的全屏比例值相等的条件下,在真实设备上可以高保真地还原设计稿。


实战一下

找了一个蓝湖的设计稿,蓝湖的设计稿宽度是750px,默认根字体大小是50px。

50px * 全屏比例值 = 750px,这个全屏比例值是15rem

看一段项目中真实设备的根字体计算代码。真实设备的屏幕宽度是375px,  该公式假设的设计稿根字体大小是100px, 为什么取100px, 可能是为了计算方便,   按照这样的前提,计算出来当真实设备根字体大小是50px的时候,能高保真还原宽度是750px,根字体大小是100px的设计稿

window.scale = document.documentElement.clientWidth / 750;
// 动态设置html的font-size
document.querySelector('html').style.fontSize = `${parseInt(100 * window.scale, 10)}px`;

按照上面我们总结的公式,50px * 全屏比例值 = 375px  真实设备的全屏比例值是7.5rem,而设计稿全屏比例值是15rem,  全屏比例值不相等。所以在写页面的样式的时候,没法直接按照设计稿上标注的尺寸写。

如何调整?

按照根字体大小计算公式,要么设计稿的根字体大小适配代码中的设定的设计稿根字体, 要么代码中的设定的设计稿根字体适配设计稿中的根字体。两者不能脱节。相对而言,调整设计稿的根字体大小更合理,频繁修改代码中预设的根字体大小,不可取。

提炼

如果真实设备的全屏尺寸不是375px, 而是下面这些,那么真实设备的根字体如何计算。以320px宽度的设备为例,

设备根字体大小 * 同等全屏比例值 = 320px

设计稿的根字体大小 * 同等全屏比例值 = 750px

设计稿的根字体大小是100px,全屏比例值计算出来是7.5

那么320px的设备,根字体大小应该为 320 ÷ 7.5 ≈ 42.66px

由计算原理可知,只要针对某一种机型做好设计稿的适配, 在其它机型上,设计稿肯定也是按等比例展示的。推荐使用375px的设备宽度与设计稿进行适配,计算方便。

容易混淆的地方

1.不理解代码中计算真实设备的根字体大小时,为什么要乘以100,对于根字体计算预设的条件,不明原理。

2.容易跟dpr(设备像素比)混淆在一起,牵强地解释根字体的计算,有碍对根字体计算的理解。dpr是逻辑像素和真实物理设备像素之间的对应关系,dpr引发的问题是在css中明明写的边距宽度是1px, 在设备上看起来比较粗,好像有2~3px那么宽。可通过脚本设置dpr或者transform: scale+伪元素的方式修正。

这次我好像才真的明白了CSS Rem字体计算的原理的更多相关文章

  1. python变量、对象和引用你真的明白了吗

    python变量.对象和引用你真的明白了吗 变量.对象和引用 Python不像C++,Java等语言一样,他们可以不用事先声明变量类型而直接对变量进行赋值.对Python语言来讲,对象的类型和内存都是 ...

  2. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  3. css基础—字体那些事

    css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...

  4. css - rem和vw

    css - rem和vw 物理像素 物理像素在不同的设备中1px里可以容纳的像素颗粒是不相同的,所以1px这个单位其实也是有N个像素颗粒填充的.同一尺寸屏幕的每个像素点所能容纳的像素颗粒越多显示效果越 ...

  5. CSS中文字体对照表

    http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...

  6. [css] 浏览器字体和css设置字体之间的关系

    原文链接:http://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7 ...

  7. CSS定义字体间距 字体行与行间距

    CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值 Word-s ...

  8. css中文字体乱码解决方案

    css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...

  9. CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑

    CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti ...

随机推荐

  1. Linux内核模块驱动加载与dmesg调试

    因为近期用到了Linux内核的相关知识,下面随笔将给出内核模块的编写记录,供大家参考. 1.运行环境 Ubuntu 版本:20.04 Linux内核版本:5.4.0-42-generic gcc版本: ...

  2. ELK(ElasticSearch+Logstash+Kibana)配置中的一些坑基于7.6版本

    三个组件都是采用Docker镜像安装,过程简单不做赘述,直接使用Docker官方镜像运行容器即可,注意三个组件版本必须一致. 运行容器时最好将三个组件的核心配置文件与主机做映射,方便直接在主机修改不用 ...

  3. java四种字符串拼接方式

    1.直接用"+"号 2.使用String的方法concat 3.使用StringBuilder的append 4.使用StringBuffer的append

  4. linux安装nginx 并配置文件服务器和代理服务器

    linux安装nginx搭建服务并实现文件服务器和代理服务器配置 1.课题的背景和意义 由于编码过程中需要进行文件上传服务,文件上传后 需要有http资源的路径需要访问.原则上可以通过Apache . ...

  5. 数据表设计之主键自增、UUID或联合主键

    最近在做数据库设计的时候(以MySQL为主),遇到不少困惑,因为之前做数据库表设计,基本上主键都是使用自增的形式,最近因为这种做法,被领导指出存在一些不足,于是我想搞明白哪里不足. 一.MySQL为什 ...

  6. 第25 章 : Kubernetes 网络模型进阶

    Kubernetes 网络模型进阶 本文将主要分享以下五个方面的内容: Kubernetes 网络模型来龙去脉 Pod 究竟如何上网? Service 究竟怎么工作? 啥?负载均衡还分内部外部? 思考 ...

  7. Kubernetes 部署策略详解-转载学习

    Kubernetes 部署策略详解 参考:https://www.qikqiak.com/post/k8s-deployment-strategies/ 在Kubernetes中有几种不同的方式发布应 ...

  8. 移动文件--mv

    mv file  srcpath 将文件移动到指定目录下 mv dir srcpath  将文件移动到指定目录下

  9. 动图:删除链表的倒数第 N 个结点

    本文主要介绍一道面试中常考链表删除相关的题目,即 leetcode 19. 删除链表的倒数第 N 个结点.采用 双指针 + 动图 的方式进行剖析,供大家参考,希望对大家有所帮组. 19. 删除链表的倒 ...

  10. day-7 xctf-level2

    xctf-level2 题目传送门:https://adworld.xctf.org.cn/task/answer?type=pwn&number=2&grade=0&id=5 ...