彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应
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自适应的更多相关文章
- 字体大小之px、em、rem、pt,字号详解
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Pe ...
- pycharm设置开发模板/字体大小/背景颜色(3)
一.pycharm设置字体大小/风格 选择 File –> setting –> Editor –> Font ,可以看到如上界面,可以根据自己的喜好随意调整字体大小,字体风格,文字 ...
- Android项目实战(二十三):仿QQ设置App全局字体大小
一.项目需求: 因为产品对象用于中老年人,所以产品设计添加了APP全局字体调整大小功能. 这里仿做QQ设置字体大小的功能. QQ实现的效果是,滚动下面的seekbar,当只有seekbar到达某一个刻 ...
- 【转】android webview设置内容的字体大小
Enum for specifying the text size. SMALLEST is 50% SMALLER is 75% NORMAL is 100% LARGER is 150% LARG ...
- Eclipse设置问题:字体大小、修改注释内容、修改快捷键
一.设置字体大小,看下图,包括了设计代码字体大小和控制台输出字体大小 二.修改注释内容 选择window---->>preferences 选择Java---->>code s ...
- Eclipse Java注释模板设置简介,更改字体大小
为类添加注释:此为我的模板设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments ...
- js动态设置根元素的rem方案
方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...
- Android textview 设置不同的字体大小和颜色
在实际应用中,需要将一个字符串已不同的颜色,字体显示出来.当然完全可以通过不同textview拼接出来.也可以通过一个textview来展示. 步骤如下: 1.定义不同style . 不妨如下定义2个 ...
- html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...
随机推荐
- 前端性能测试工具之PageSpeed Insights
谷歌开发的一个免费的网页分析工具,在地址栏中输入被分析的网站 url 地址,点击分析 地址:https://developers.google.cn/speed/pagespeed/insights/ ...
- 【Processing-日常1】小圆碰撞
之前在CSDN上发表过: https://blog.csdn.net/fddxsyf123/article/details/79741637
- Centos-获取远程主机对应端口信息-telnet
telnet 通过 telnet协议与远程主机通信或者获取远程主机对应端口信息 格式 telnet URL/IP port
- 题目:写出一条SQL语句,查询工资高于10000,且与他所在部门的经理年龄相同的职工姓名。
create table Emp( eid char(20) primary key, ename char(20), age integer check (age > 0), did char ...
- matlab一个figure画多个子图,和多个figure画多个图。
参考:https://blog.csdn.net/xiaotao_1/article/details/79024488 1,一个figure画多个子图: figure(10) % define fig ...
- rustup命令速度慢
通过以下命令更换镜像: $ENV:RUSTUP_DIST_SERVER='https://mirrors.ustc.edu.cn/rust-static' $ENV:RUSTUP_UPDATE_ROO ...
- OAth 2.0 的白话讲解
一.OAuth2.0是什么,主要做什么用的? 官方注解 简单说,OAuth 就是一种授权机制.数据的所有者告诉系统,同意授权第三方应用进入系统,获取这些数据.系统从而产生一个短期的进入令牌(token ...
- Signature Scanning(中文暂时译为"特征码扫描")是在C++(起码我是用C++^^)开发中很好的一种方式
1.介绍 本文主要简单介绍在没有代码的情况下,如何从一个动态链接库中获取某个函数的址.主要实现方式为Signature Scanning(特征码扫描) 2.什么是Signature Scanning( ...
- redis 开启AOF 持久化
redis 开启AOF 找到redis 安装目录 打开 redis.conf 修改以下参数: appendonly yes (默认no,关闭)表示是否开启AOF持久化: append ...
- jenkins:用jenkins通过ssh部署jar包到远程linux机器(jdk 15 / jenkins 2.257)
一,远程linux机器上安装java15(如已安装,跳过此步) 说明:演示用的linux机器ip: 192.168.1.47 1,下载: [root@blog ~]# cd /usr/local/so ...