rem的用法

时间 2019-11-11

标签 rem 用法繁體版

原文原文链接

rem 是css3中的属性，ie8下不兼容。
rem是相对于根元素<html> 这就意味着咱们只须要在根目录加入如下css代码。默认单位为16px，咱们须要在用rem的时候除以16 就是rem的值。好比字体是20px， css

20÷16 = 1.25rem便可。html

@media only screen and (max-width: 320px) {
    html {
        font-size: 16px;
    }
}

@media only screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 18px;
    }
}

@media only screen and (min-width: 361px) and (max-width: 375px) {
    html {
        font-size: 18.75px;
    }
}
@media only screen and (min-width: 376px) and (max-width: 384px) {
    html {
        font-size: 19px;
    }
}

@media only screen and (min-width: 385px) and (max-width: 413px) {
    html {
        font-size: 19px;
    }
}

@media only screen and (min-width: 414px) and (max-width: 480px) {
    html {
        font-size: 20.7px;
    }
}

@media only screen and (min-width: 481px) and (max-width: 540px) {
    html {
        font-size: 27px;
    }
}

来源：https://lufeng.info/ 前端

推荐前端交流群：群号：339840649；群名称:JS、VUE 工程与技术欢迎加入~
点击加入：
html5

扫码加入：node

1. rem的用法
2. rem的使用方法
3. 转载：rem的用法
4. rem和em的用法
5. rem的使用
6. rem 响应式用法
7. 浅谈移动端rem的用法
8. 响应式布局中rem的用法
9. 简单理解rem的用法
10. rem使用
更多相关文章...
• Redis哨兵（Sentinel）模式的配置方法及其在Java中的用法 - Redis教程
• Spring中Bean的作用域 - Spring教程
• C# 中 foreach 遍历的用法
• 适用于PHP初学者的学习线路和建议