通过rem自适应屏幕尺寸
阅读原文时间:2023年07月08日阅读:3

通过rem自适应屏幕尺寸

  • px

    px就是pixel的缩写,设备分辨率,物理像素

  • pt

    pt就是point的缩写,逻辑分辨率,逻辑像素

  • em

    参考物是父元素的font-size,具有继承的特点

    如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值

  • rem

    css3新单位,相对于根元素html(网页)的font-size

  • vw

    css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%

    浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

  • vh

    css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%

    浏览器高度900px, 1 vh = 900px/100 = 9 px

设备

逻辑分辨率(pt)

设备分辨率(px)

4(S)

320x480

640x960

5(S)

320x568

640x1136

6

375x667

750x1334

设置header内的<meta>标签

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

设置header内的<script>标签

<script type="text/javascript">
    //  designSize 设计稿宽度,一般为 640(px) 或 750(px)
    document.documentElement.style.fontSize = document.documentElement.clientWidth / designSize *100 + 'px';
</script>

设计稿640px,以iPhone4尺寸为例

页面内有一个红色盒子宽高都是320px,里面的文字是32px

对应的逻辑分辨率为宽高160px,文字16px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css适配</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

    <style type="text/css">
      body{
        margin: 0 ;padding: 0;font-size: 0.32rem;
        /*
          0.32rem = 0.32 * 50px = 16px (320屏幕宽度下html的font-size: 50px)
          0.32rem = 0.32 * 64.68px = 20px (414屏幕宽度下html的font-size: 64.68px)
          0.32rem = 0.32 * 120px = 38px (768屏幕宽度下html的font-size: 120px)
        */
      }
      div{
          width: 3.2rem;height: 3.2rem ;background: red;
        /*
          3.2rem = 3.2 * 50px = 160px
        */
            }
    </style>

    <script type="text/javascript">
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
      console.log(document.documentElement.clientWidth);    //  320
    </script>
  </head>

  <body>
    <div class="box">
      <span class="demo">测试</span>
    </div>
  </body>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      var font=$(".demo").css('font-size');
      console.log("字体大小:",font);    //  字体大小: 16px
      var boxw=$(".box").css('width');
      console.log("宽度:",boxw);    //  宽度:160px
    });
    $(function(){
      var font=$("html").css('font-size');
      console.log("html字体大小:",font);    //  html字体大小: 50px
    });
  </script>
</html>

设计稿750px,以iPhone6尺寸为例

页面内有一个红色盒子宽高都是375px,里面的文字是37.5px

对应的逻辑分辨率为宽高187.5px,文字18.75px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css适配</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

    <style type="text/css">
      body{
        margin: 0 ;padding: 0;font-size: 0.375rem;
        /*
          0.375rem = 0.375 * 50px = 18.75px (375屏幕宽度下html的font-size: 50px)
          0.375rem = 0.375 * 42.67px = 16px (320屏幕宽度下html的font-size: 42.67px)
          0.375rem = 0.375 * 55.2px = 20px (414屏幕宽度下html的font-size: 55.2px)
        */
      }
      div{
        width: 3.75rem;height: 3.75rem ;background: red;
        /*
          3.75rem = 3.75 * 50px = 187.5px
        */
      }
    </style>

    <script type="text/javascript">
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
      console.log(document.documentElement.clientWidth);    //  375
    </script>
  </head>

  <body>
    <div class="box">
      <span class="demo">测试</span>
    </div>
  </body>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      var font=$(".demo").css('font-size');
      console.log("字体大小:",font);    //  字体大小: 18.75px
      var boxw=$(".box").css('width');
      console.log("宽度:",boxw);    //  宽度:187.5px
    });
    $(function(){
      var font=$("html").css('font-size');
      console.log("html字体大小:",font);    //  html字体大小: 50px
    });
</script>
</html>