百科狗-知识改变命运!
--

rem - 相对于根元素字体尺寸的倍数 - css 长度

百变鹏仔1年前 (2023-11-21)阅读数 13#技术干货
文章标签宽度

rem

版本:CSS3

rem:这个单位代表根元素的 font-size 大小(例如元素的font-size)。当用在根元素的 font-size 上面时,它代表了它的初始值。

浏览器支持

IE9以上版本的浏览器都支持rem

说明:

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

rem全称font size of the root element,指相对于根元素字体大小的单位。之前他还有个兄弟:em

  • em:相对父元素字体大小的单位
  • rem:相对于根元素字体大小的单位

使用

首先是设置根元素,也就是html的字体大小。比如我们设置为10px

html{font-size:10px;}

然后就可以灵活的控制啦。最终.btn的宽度为60px

.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

不同分辨率下的font-size

html{font-size: calc(100vw/7.5);//100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。}

由于rem是相对于根节点元素大小的单位,遂当设备宽度改变时,采用rem布局的大小均会跟随相同比例变化,从而实现整体缩放。

首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。页面是以640的宽度去切的,怎么计算不同宽度下font-site的值,大家看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。

两个深坑

  • 我看了网上很多关于rem的资料,基本都说浏览器的默认字号就是16px,然后直接定义font-size:62.5%。但是,rem属于css3的属性,有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px,那么上面的10/16换算就不成立,直接给html定义font-size: 62.5%不成立。
  • chrome强制字体最小值为12px,低于12px按12px处理,那上面的1rem=10px就变成1rem=12px,出现偏差(下面给demo)。

解决方案:将1rem=10px 换为 1rem=100px(或者其它容易换算的比例值);不要在pc端使用rem。

那么上面的页面根元素样式要改为:

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

rem - 相对于根元素字体尺寸的倍数 - css 长度

再用本工厂总结得出的各分辨率媒体查询换算:

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

根据屏幕大小而动态改变,可以推算出公式:

屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)

实例

html,
h1{
	font-size:12px;
}
p{
	font-size:2rem;
} 

下面的文字将是html定义的字体大小的2倍:

我是html定义的12px的2倍,字体大小为24px

效果图:

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)