rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。那么如何动态设置呢,看到很多文章都讲的是使用js获取设备屏幕尺寸来操作,而我在工作中一直使用的方法是通过设置文档根元素 font-size: calc(100vw/18.75) 来实现 rem 自适应。

  以常见的750px的设计稿为例,如果想要规定1rem = 40px(基准值,后面会讲到),便是设置 html { font-size: calc(100vw / 18.75) }

  其中,100vw是设备视口的总宽度,当设备的宽与设计稿的等宽时,则此时有:

  100vw = 750px => 1px = 100vw / 750

  如果设置基准值为 1px,则 1rem = 1px,代码则是 html { font-size: calc(100vw / 750) }

  但是一般不会设置为1px,而是设置10px、20px或者40px,即1 rem等于10px、20px 或者 40px ,以 1rem = 40px为例,则此时有:

  40px = 40 * 100vw / 750 => 40px = 100vw / (750 /40) => 40px = 100vw / 18.75 即 1rem = 100vw / 18.75,所以设置 根元素字体大小为 calc(100vw / 18.75) 即可。

  现在 750px的设计稿中有一个400*200的div元素,我们在样式中如果写

  div {
  width: 400px;
  height: 200px;
  }

  那么无论设备的尺寸如何,这个元素的宽高始终都是固定的400*200,缺少灵活性,所以需要使用 rem 单位做自适应,现在设置文档根元素字体大小为 calc(100vw / 18.75) },即 文档中 1rem = 100vw / 18.75 ,

  div {
  width: 10rem;
  height: 5rem;
  }

  当屏幕尺寸为 750px时,该元素的宽为:

  10rem = 10 * 100vw /18.75

  =>10rem = 10 * 750px / 18.75

  =>10rem = 10 * 750px / (750 / 40)

  =>10rem = 400px

  当屏幕尺寸为 375px时,该元素的宽为:

  10rem = 10 * 100vw / 18.75

  =>10rem = 10 * 375px / (750 / 40)

  =>10rem = 200px

  可以看到,元素尺寸随着设备尺寸的变化,同时发生了变化,这就是 rem 自适应的能力。

  第一次看这个方法,会觉得有点绕,为什么写样式的时候明明已经知道1rem等于多少px了,实际的rem却不是我们写样式时用来换算的那个值呢?根据我的理解,写样式时换算用的1 rem = 40px,称为基准值,先用这个基准值把设计稿的尺寸全部换算成单位为rem 的大小,然后当页面渲染时,根元素的字体大小会决定样式表生效时 1rem到底等于多少px,这时再把样式中的尺寸换算成以px 为单位的值。而我们设置根元素的字体大小时假定的1rem = 40px,也是用于换算的基准值40px,并不是页面渲染时1rem真的就等于 40px。

  总结一下就是,在写样式时,我们不知道设计稿与实际显示设备的宽度关系,先假定设计稿与设备同宽,此时我们需要一个基准值来将设计稿上元素的尺寸换算成rem,同时设置根元素字体大小时也使用该设计稿本身的宽和相同的基准值,即我们换算用40px,那么在写calc时也是40px,即:

  100vw = 750px => 1px = 100vw / 750=> 40px = 40 * 100vw / 750

  其中750是设计稿的宽,当设计稿是其它尺寸时,记得要换成设计稿对应的宽,如1920px。当设备与设计稿不同宽时,通过rem会等比例变化元素的尺寸而自适应。

  感觉自己懂了,但是写出来又感觉没讲清楚,有待进一步学习。

彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应的更多相关文章

  1. 字体大小之px、em、rem、pt,字号详解

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Pe ...

  2. pycharm设置开发模板/字体大小/背景颜色(3)

    一.pycharm设置字体大小/风格 选择 File –> setting –> Editor –> Font ,可以看到如上界面,可以根据自己的喜好随意调整字体大小,字体风格,文字 ...

  3. Android项目实战(二十三):仿QQ设置App全局字体大小

    一.项目需求: 因为产品对象用于中老年人,所以产品设计添加了APP全局字体调整大小功能. 这里仿做QQ设置字体大小的功能. QQ实现的效果是,滚动下面的seekbar,当只有seekbar到达某一个刻 ...

  4. 【转】android webview设置内容的字体大小

    Enum for specifying the text size. SMALLEST is 50% SMALLER is 75% NORMAL is 100% LARGER is 150% LARG ...

  5. Eclipse设置问题:字体大小、修改注释内容、修改快捷键

    一.设置字体大小,看下图,包括了设计代码字体大小和控制台输出字体大小 二.修改注释内容 选择window---->>preferences 选择Java---->>code s ...

  6. Eclipse Java注释模板设置简介,更改字体大小

    为类添加注释:此为我的模板设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments ...

  7. js动态设置根元素的rem方案

    方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...

  8. Android textview 设置不同的字体大小和颜色

    在实际应用中,需要将一个字符串已不同的颜色,字体显示出来.当然完全可以通过不同textview拼接出来.也可以通过一个textview来展示. 步骤如下: 1.定义不同style . 不妨如下定义2个 ...

  9. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

随机推荐

  1. 深入总结Javascript原型及原型链

    本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...

  2. 使用内置对象Math.random实现猜数字游戏

    function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min;    //得到两个数之间的随机整数,包含实 ...

  3. Python面向对象基础变量

    In [1]: class A: ...: NAME = 'A' # 类的直接下级作用域 叫做类变量 ...: def init(self, name): ...: self.name = name ...

  4. Visual C++中各种文件的作用(详细)

    参考:http://blog.sina.com.cn/s/blog_6975d67c0100r3kx.html DSW:全称是Developer Studio Workspace,最高级别的配置文件, ...

  5. Arduino - 串口操作函数与示例代码大全

    来源:https://blog.csdn.net/iracer/article/details/50334041 Arduino - 串口操作函数与示例代码大全 本文总结了Arduino常用串口操作函 ...

  6. MySQL 查询字段时,区分大小写

    设置排序规则: 区分大小写的查询: mysql> select * from user; +----+----------+-----------+------+------+ | id | u ...

  7. 【题解】SP1811 LCS - Longest Common Substring

    \(\color{purple}{Link}\) \(\text{Solution:}\) 题目要求找到两个串的最长公共子串.\(LCP\) 我们将两个串中间和末尾插入终止符,并弄到一棵后缀树上去. ...

  8. STM32之旅3——时钟数

    STM32之旅3--时钟数 STM32F1是M3内核,它的时钟数很庞大,让一个初学者去看,估计会很吃力,和我们入门的8051单片机的时钟不同,这里又倍频.又分频,而且还分成好多个时钟,不同的外设时钟不 ...

  9. HTML CSS+JS想要做放大镜练习,如何获取同样的大图和小图?

    1.进入某商城找到对应的图片: 步骤一: 步骤二: 步骤三: 2.检查源代码: 情况一:按F12 情况二:鼠标在网页内,直接右键-->"检查元素" 1.选中选择部分 2.点击 ...

  10. Java虚拟机系列——检视阅读

    Java虚拟机系列--检视阅读 参考 java虚拟机系列 入门掌握JVM所有知识点 2020重新出发,JAVA高级,JVM JVM基础系列 从 0 开始带你成为JVM实战高手 Java虚拟机-垃圾收集 ...