移动端字体适配

最新推荐文章于 2024-03-20 15:42:09 发布

DiD徐昊

最新推荐文章于 2024-03-20 15:42:09 发布

阅读量202

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_62816576/article/details/130052696

版权

rem

相对于 html 根标签的 font-size 大小

因此可以利用获取设备 视口宽度 的方式来做移动端适配

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 完美视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>rem</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 8rem;
      height: 8rem;
      background-color: #f60;
    }
  </style>
</head>
<body>
  <div class="box">test</div>
</body>
<script>
  let html = document.querySelector('html')
  // 1rem = html.style.fontSize
  // 布局视口的宽度就为 16rem
  // 设计图的宽度为750px (以iphone6为准) ，其实就是16rem
  html.style.fontSize = document.documentElement.clientWidth/16 + 'px'
</script>
</html>
复制代码

获取视口宽度为 750px , 此时 1rem = 750px; 除以16则为：视口宽度为 1rem = 750/16 + 'px';

但是上面的方法是有缺陷的，由于权重比较低，所以 font-size 的属性会被改变；因此我们会想到给属性加 !important 增加权重，但是 !important 是作为 css 属性，它并不能在标签中使用，所以就有了下面的方案。

创建一个style标签，然后给标签添加 HTML 属性 font-size 来设置字体大小

完美方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 完美视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>rem</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 8rem;
      height: 8rem;
      background-color: #f60;
    }
  </style>
</head>
<body>
  <div class="box">test</div>
</body>
<script>
  // 先创建一个style标签
  // 给标签添加内容，内容就为根标签的字体大小
  // 然后将创建的style标签放到head标签中
  (function () {
    let styleNode = document.createElement('style')
    let width = document.documentElement.clientWidth/16
    styleNode.innerHTML = "html {font-size: "+ width +"px !important}"
    document.head.appendChild(styleNode)
  })()
</script>
</html>

DiD徐昊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端字体适配

rem相对于 html 根标签的 font-size 大小因此可以利用获取设备的方式来做移动端适配获取视口宽度为 750px , 此时 1rem = 750px;除以16则为：视口宽度为 1rem = 750/16 + 'px';但是上面的方法是有缺陷的，由于权重比较低，所以 font-size 的属性会被改变；因此我们会想到给属性加!important 增加权重，但是!important 是作为 css 属性，它并不能在标签中使用，所以就有了下面的方案。
复制链接

扫一扫