微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

bootstrap笔记

8. rem的使用方法

首先,先说一个常识,浏览器的认字体高都是16px。

兼容性:

目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

就算浏览器不支持,就多写一个绝对单位的声明。这时不支持的浏览器会忽略用rem设定的字体大小,选择绝对单位字体的大小。

使用%单位方便使用

css中的body中先全局声明font-size=62.5%,这里的%的算法和rem一样。

因为100%=16px,1px=6.25%,所以10px=62.5%,这是的1rem=10px,所以12px=1.2rem。

px与rem的转换通过10就可以得来,方便了吧!

使用方法

注意: rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,>>其它元素使用rem单位设置成相应的百分比即可;

简单的说:就是 1rem 的大小就是html设置的字体大小.
例如:html设置的字体大小是16px;那么 1rem 就是 16px ;

<div class="container">
    <div class="row align-items-start bg-success text-white" style="height: 100px" >
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
    </div>
    <div class="row align-items-center bg-info text-white" style="height: 100px">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
    </div>
    <div class="row align-items-end bg-secondary text-white" style="height: 100px">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
    </div>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐