REM适配方案 - 前端教程

admin

REM适配方案

<title>rem适配</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /* 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
      /* @media (width:320px) {
        html {
            font-size: 32px;
        }
      }
      @media (width:375px) {
        html {
            font-size: 37.5px;
        }
      }
      @media (width:414px) {
        html {
            font-size: 41.4px;
        }
      } */

      /* 2. 使用rem单位书写尺寸 */
      .box {
        width: 5rem;
        height: 3rem;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>

    <script src="./js/flexible.js"></script>
  </body>
复制代码

flexible.zip (684 Bytes, 下载次数: 0, 售价: 1 金豆)

		自动登录	找回密码
密码			立即注册

REM适配方案 [复制链接]

0 回复

浏览过的版块

admin