• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • rem

    版本:CSS3

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

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    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)

    实例

    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    <title></title>
    
    <style>
    html,
    h1{
    	font-size:12px;
    }
    p{
    	font-size:2rem;
    }
    </style>
    </head>
    <body>
    	<h1>下面的文字将是html定义的字体大小的2倍:</h1>
    	<p>我是html定义的12px的2倍,字体大小为24px</p>
    </body>
    </html>

    效果图:

    上篇:ch

    下篇:<percentage>