html 根字号是什么,彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应_weixin_39605894的博客-程序员宝宝

技术标签: html 根字号是什么  

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会等比例变化元素的尺寸而自适应。

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39605894/article/details/117815940

智能推荐

android MapBox地图基于openstreetmap开发_YBZha的博客-程序员宝宝

最近在做一个安卓地图项目,需要用到世界地图,但国内谷歌基本已经不能用了,这时就需要一个新的开源api,经过别人的介绍才发现了MapBox 这个开源免费的api,加载速度比osm地图要快多了,一下是我碰到的一些问题,希望可以帮到其他的一些人 int screenWidth = getActivity().getWindowManager().getDefaultDisplay().getW

IOS写日志文件并保存到Documents_瘦瘦的胖子的博客-程序员宝宝

Unity开发ios版的时候常要借助xcode调试代码情景1在项目接入推送的时候,要对通知栏点击事件做统计打点,在app杀死的情形下,点击通知栏启动app,这种情形下是无法连接xcode进行调式的,这样就拿不到我们提前写下的nslog日志情景2情景。。。基于这种情况,我们就需要其他获取日志的手段来调式代码,可以将日志输出到app的Documents目录指定文本处。如下方法一...

PMS解析AndroidManifest.xml文件的过程_Alexwym的博客-程序员宝宝

PMS解析AndroidManifest.xml文件的过程一、前言​ 前段时间在看当下主流的安卓插件化技术原理的时候,发现目前插件化技术对于四大组件的处理基本都是通过代理来实现的(动态注册的广播接收器除外)。简单说就是需要先在主包里预埋一个注册到AndroidManifest.xml中的组件,具体的业务逻辑实现则在插件里面,最后通过代理技术将两者连接起来。​ 那么系统是如何从AndroidManifest.xml中解析出四大组件的?以及解析后的组件信息又是怎么保存的呢?​ 首先我们要知道负责解

RadioGroup动态添加RadioButton_步步惊情的博客-程序员宝宝_radiogroup动态添加

在RadioGroup里动态添加RadioButton,通过以下代码添加 RadioButton radioButton = new RadioButton(refView.get().getActivity()); radioButton.setBackgroundResource(R.drawable.ghsj_button);group.addView(radio);页面效果并不是很好,背景图片还会拉伸,试了很多方法没有效果后来想到一种方案,结合xml使用&l

【Struts2】 总结_我是周洲的博客-程序员宝宝

Struts2是基于mvc模式的轻量级web框架,是以webWork为核心的,使用拦截器机制来处理用户的请求,使业务逻辑控制器与ServletAPI完全脱离开。       Struts2执行流程图:       用户发出请求,程序调用核心控制类StrutsPrepareAndExecuteFilter,询问ActionMapper是否有符合的action类。决定调用某个actio

随便推点

Docx:docx.opc.exceptions.PackageNotFoundError: Package not found at_python__reported的博客-程序员宝宝

Docx:docx.opc.exceptions.PackageNotFoundError: Package not found at一、报错内容二、解决方法一、报错内容报错:在我打开这个文档的时候:docx.opc.exceptions.PackageNotFoundError: Package not found at二、解决方法第一步:首先确定自己的文档类型确实docx第二步:确定是不是空文档如果是空文档的话也会报错,csdn博客上的解决方法都是增加空格,但是我的错误并不是这样第

计算两个日期之间相差多少天,计算当前日期是星期几_say_haha的博客-程序员宝宝

完美世界编程题,计算两个日期之间经过了多少个零点和多少个星期四。package wanmeishijie170926;/* *输入2017/9/7 0:0:02017/9/21 0:0:0输出 13,1 * */import java.util.Scanner;public class Test1 { public static void main(Strin

如何将Wifi信号强度从质量(百分比)转换为RSSI(dBm)?_Nullber的博客-程序员宝宝_dbm转百分比

如何将Wifi信号强度从质量(百分比)转换为RSSI(dBm)?一、术语WLAN_SIGNAL_QUALITY,取值0-100。0代表RSSI为-100 dbm。100代表RSSI为-50 dbm。可用根据RSSI通过线性插值,计算1-99值。RSSI(无线信号强度指示器”),以dBm为单位1、经验式小于-50dB=信号强度的100%,从-51到-55dB = 90%,从-56到-62dB = 80%,从-63到-65dB = 75%,从-66 to 68dB=70%,-69 to 74dB= 6

树梅派应用22:树莓派 SAKS 扩展板实用应用 之 DS1307 RTC 时钟模块_huayucong的博客-程序员宝宝

本文所介绍的内容基于树莓派瑞士军刀扩展板(SAKS),由于 SAKS 基于树莓派通用的 GPIO 设计,文中的原理和代码也适用于其他情况。本节以 SAKS 扩展板为硬件基础,实现让树莓派掉电后系统时间能继续保持的功能。在这个扩展板上已经有一个DS1307 RTC实时时钟模块,它是I2C类的设备,首先我们需要修改树莓派的配置文件使能I2C,通过nano编辑器修改raspi-blacklist.c

自考计算机网络原理2018李全龙 传输层 课后习题_刘小芬的博客-程序员宝宝_实现可靠数据传输的主要措施有哪些

1、实现可靠数据传输的主要措施有哪些?这些措施主要用于解决哪些问题?P98差错检测:利用差错编码实现数据包传输过程中的比特差错检测确认:确认方向发送方反馈接收状态重传:发送方重新发送接收方没有正确接收的数据序号:确保数据按序提交定时器:解决数据丢失问题2、UDP和TCP分别如何实现复用和分解?P97在Internet网络中,唯一标识套接字的基本信息是IP地址和端口号。UDP基于目的IP地址和目的端口号二元组唯一标识一个UDP套接字,从而可以实现精确分解;TCP则需要基于源IP地址、源端口号、

查漏补缺:2021年搞定所有的SpringCloud面试(含答案和思维导图)_麒麟来编程的博客-程序员宝宝

前言Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等,都可以用Spring Boot的开发风格做到一键启动和部署。Spring Cloud并没有重复制造轮子,它只是将各家公司开发的比较成熟、经得起实际考验的服务框架组合起来,通过Spring Boot风格进行再封装屏蔽掉了复杂的配置和实现原理,最终给开发者留出了一套简单易懂、易部署和易维护的分布式系统开发工具包。

推荐文章

热门文章

相关标签