rem - 相对于根元素字体尺寸的倍数 - css 长度
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%*/}
再用本工厂总结得出的各分辨率媒体查询换算:
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
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!