CSS3中REM使用详解

时间 2019-11-14

标签 css3 css rem 使用详解栏目 CSS 繁體版

原文原文链接

在页面中设置字体，咱们知道有常见的两种，px 和 em.css

px

在Web页面制做中，咱们通常使用“px”来设置咱们的文本，由于他比较稳定和精确。可是这种方法存在一个问题，当用户在浏览器中浏览咱们制做的Web页面时，他改变了浏览器的字体大小（虽然通常人不会去改变浏览器字体大小），这时会使用咱们的Web页面布局被打破，这时就提出了使用“em”来定义Web页面的字体。html

em

通常都是body的font-size为基准
经常使用写法：前端

 
        body { 
       
        font-size 
        :  
        62.5% 
        ; 
       
        /*10 ÷ 16 × 100% = 62.5%*/ 
       
        } 
       
        h 
        1 
        { 
       
        font-size 
        :  
        2.4em 
        ; 
       
        /*2.4em × 10 = 24px */ 
       
        } 
       
        p { 
       
        font-size 
        :  
        1.4em 
        ; 
       
        /*1.4em × 10 = 14px */ 
       
        } 
       
        li { 
       
        font-size 
        :  
        1.4em 
        ; 
       
        /*1.4 × ? = 14px ? */ 
       
        }

为何“li”的“1.4em”是否是“14px”将是一个问号呢？在使用“em”做单位时，必定须要知道其父元素的设置，由于“em”就是一个相对值，并且是一个相对于父元素的值，
计算公式：1 ÷ 父元素的font-size × 须要转换的像素值 = em值
这样的状况下“1.4em”能够是“14px”,也能够是“20px”，或者说是“24px”，总之是一个不肯定值，那么解决这样的问题，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。浏览器

rem

rem:W3C官网描述是“font size of the root element”，即rem是相对于根元素。
咱们只须要在根元素肯定一个参考值，在根元素中设置多大的字体，这彻底能够根据您本身的需，你们也能够参考下图：

嫌换算麻烦的同窗，也能够去http://pxtoem.com/这个网站去设置
经常使用写法：布局

 
        html { 
       
        font-size 
        :  
        62.5% 
        ; 
       
        /*10 ÷ 16 × 100% = 62.5%*/ 
       
        } 
       
        body { 
       
        font-size 
        :  
        1.4 
        rem; 
       
        /*1.4 × 10px = 14px */ 
       
        } 
       
        h 
        1 
        { 
       
        font-size 
        :  
        2.4 
        rem; 
       
        /*2.4 × 10px = 24px*/ 
       
        }

在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，若是没有设置，将是以“16px”为基准）。从上面的计算结果，咱们使用“rem”就像使用“px”同样的方便，并且同时解决了“px”和“em”二者不一样之处。学习

浏览器兼容性

IE9以上等支持CSS3的浏览器是确定能够支持的，若是想要兼容IE低版本，那能够考虑针对IE9如下低版本浏览器，用px来实现。字体

来源：Web前端(W3Cways.com) - Web前端学习之路 » CSS3中REM使用详解网站