移动端常用单位

最新推荐文章于 2022-08-15 10:34:55 发布

Jookerone

最新推荐文章于 2022-08-15 10:34:55 发布

阅读量356

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_45178972/article/details/115448323

版权

CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

em：自身元素font-size的n倍，如果自身元素没有设置font-size，就从父元素继承过来
pc端的font-size最小是12px,但移动端就不是了
em常用于text-indent:2em; 段落缩进，因为2em就表示2个字体大小
2，主流：rem
375px -> 1rem = 20px
height = 50(50是某个div的高度) / 20 = 2.5rem
750px -> 1rem = 40px
height = 100 / 40 = 2.5rem
?(视口宽度) -> 1rem = (?/375) * 20px
1rem = (document.documentElement.clientWidth / 375 ） * 20px
或者
1rem = (document.documentElement.clientWidth / 750 ) * 40px

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 20px;
    }

    div {
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      background: pink;
      text-align: center;
    }
  </style>
</head>

<body>
  <div>123</div>
  <script>
    function setRem() {
    //获取html的dom元素
      const domEl = document.documentElement;
      let cliWidth = domEl.clientWidth;
      domEl.style.fontSize = (cliWidth / 375) * 20 + 'px';
    }
    setRem()
    window.onresize = setRem
  </script>
</body>

</html>

Jookerone

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端常用单位

em：自身元素font-size的n倍，如果自身元素没有设置font-size，就从父元素继承过来pc端的font-size最小是12px,但移动端就不是了em常用于text-indent:2em; 段落缩进，因为2em就表示2个字体大小2，主流：rem375px -> 1rem = 20pxheight = 50(50是某个div的高度) / 20 = 2.5rem750px -> 1rem = 40pxheight = 100 / 40 = 2.5rem?(视口宽度) -.
复制链接

扫一扫