随笔 - 6,  文章 - 0,  评论 - 0,  阅读 - 3152
一、rem 原理与简介
字体单位:
    值根据 html 根元素大小而定,同样可以作为宽度,高度等单位
适配原理:
    将 px 替换为 rem,动态修改 HTML 根元素的 font-size 适配
兼容性:
    Ios 6 以上 和  Android 2.1 以上,基本覆盖所有流行的手机系统
// 移动 web 独有的 viewport 标签
// initial-scale 初始缩放
// user-scaleable 用户是否可缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">

 

 
1rem = html 的 font-size
html 不设置 font-size 默认 1rem = 16px
 
二、如何根据不同屏幕设置 font-size 大小
1、媒体查询
复制代码
<style type="text/css">   
   @media screen and (max-width: 320px) {
        html {
          font-size: 20px;
        }
      }  
    @media screen and (max-width: 360px) and (min-width: 321px) {
        html {
          font-size: 24px;
        }
      }
</style>
复制代码

 

2、使用 js 方式
复制代码
<script type="text/javascript">
    // 获取视窗宽度
    let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth
    console.log(htmlWidth)
 
 
    // 获取视窗高度
    let htmlDom = document.getElementsByTagName('html')[0]
 
 
    htmlDom.style.fontSize = htmlWidth / 10 + 'px'
</script>
复制代码
 
三、rem 与 scss 相结合
1、rem 基准值的计算
    rem 基准值就是 html 的 font-size
2、rem 数值计算与构建
    换算出的 px 值的 rem 的值
    如 1rem = 16px
    170px = 170/16 rem
3、rem 与 scss 相结合
 
复制代码
// 封装
@function px2rem($px) {
    $rem: 37.5px // 以 iPhone 6 浏览器为基础 基准值就为 375 / 10 = 37.5
    @return ($px / $rem) + rem  // return 的值为 传进来的 px值 / rem基准值 + rem 单位
}
// 使用
.box {
    width: px2rem(100px)
   height: px2rem(100px)
}
复制代码

 

posted on   渐行渐远ls  阅读(445)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示