CSS3中的rem单位

您所在的位置:网站首页 rm是什么单位名称 CSS3中的rem单位

CSS3中的rem单位

2024-03-15 06:54| 来源: 网络整理| 查看: 265

一、rem介绍 rem是什么?

它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font-size决定了rem的尺寸,也就是说它是一个相对单位,相对于(html)。

浏览器的默认字体?

浏览器的默认的font-size是16px,1rem默认就等于16px。(chrome最小字体为12px)

rem可以做什么及它的应用场景?

用来做web app的屏幕适配,因为不同手机型号的屏幕大小都不同,所以这时候我们就不能用px来做单位,rem是适配不同手机屏幕的一种方案。

设置的font-size来改变rem尺寸 :root{ font-size:20px; } .box{ width:1rem; height:1rem; background-color:purple; }

将根元素html的font-size设置为20px,此时box的宽高都为20px,也就是1rem = 20px

##二、步骤 ###1. 首先用js根据不同的视窗宽度动态的改变根元素的font-size ``` //获取视窗宽度(兼容性写法) let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;

//获取html元素 let rootDom = document.querySelector('html');

//动态设置html的font-size(除以10是让浏览器的font-size达到比较合适目的) rootDom.style.fontSize = rootWidth / 10 + 'px';

###2. 根据设计师的设计稿中的px单位转换成rem单位 ####如何正确的通过px值计算rem值 **px单位 / font-size【动态】 = rem单位【动态】 (错误的想法,有的小伙伴迷糊在这里)** **px单位 / font-size【固定】 = rem单位【固定】 (正确的想法,有的小伙伴可能开始想不明白)** ***这里要注意的是你计算的font-size是固定的,而不是html的font-size是固定的,很多新人困惑在这里*** **错误的计算方法:(动态font-size)** **200px / (320 / 10)【iphone5】 = 6.25rem** **200px / (375 / 10)【iphone6】 = 5.333rem** **200px / (768 / 10)【ipad】 = 2.604rem** **这样的话** **在【iphone5】下6.25rem 就是200px** **在【iphone6】下5.333rem 就是200px** **在【ipad】下2.604rem 就是200px** 我们通过了***(图纸的px值 和 动态的font-size值)求出了动态的rem*** **按照这样的方式设置rem,在不同的尺寸的机型下都是500px,那我还不如直接写死500px,因为屏幕的尺寸大小都是不同的,所以我们这样做毫无意义。(相当于我们根据一个固定的px值求不同机型下的rem值)。** **正确的计算方法:(固定font-size)以iphone6为基准** **200px / (375 / 10)【iphone6】 = 5.333rem** **这样的话** **在【iphone5】下5.333rem 就是170px** **在【iphone6】下5.333rem 就是200px** **在【ipad】下5.333rem 就是410px** **也可以以【iphone5】为基准** **200px / (320 / 10) 【iphone5】 = 6.25rem** **这样的话** **在【iphone5】下6.25em 就是200px** **在【iphone6】下6.25rem 就是234px** **在【ipad】下6.25rem 就是480px** **这样就达到用rem来适配不同尺寸的屏幕了** **我们以一种机型的font-size为基准,来计算出一个固定的rem,根元素html的font-size是动态的,所以这个rem值会根据不同机型的font-size达到适配的目的(注意:你参与计算的font-size值绝不能是动态的,否则毫无意义)。** **设计师常选择iPhone6作为基准设计尺寸,我们一般以iPhone6为基准**


【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3