设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › REM适配方案
返回列表 发新帖

REM适配方案

[复制链接]
admin 发表于 2025-6-1 15:31:16 | 显示全部楼层 |阅读模式
REM适配方案

1.jpg
2.jpg

  1. <title>rem适配</title>
  2.     <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.       }

  8.       /* 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
  9.       /* @media (width:320px) {
  10.         html {
  11.             font-size: 32px;
  12.         }
  13.       }
  14.       @media (width:375px) {
  15.         html {
  16.             font-size: 37.5px;
  17.         }
  18.       }
  19.       @media (width:414px) {
  20.         html {
  21.             font-size: 41.4px;
  22.         }
  23.       } */

  25.       /* 2. 使用rem单位书写尺寸 */
  26.       .box {
  27.         width: 5rem;
  28.         height: 3rem;
  29.         background-color: pink;
  30.       }
  31.     </style>
  32.   </head>

  34.   <body>
  35.     <div class="box"></div>

  37.     <script src="./js/flexible.js"></script>
  38.   </body>
复制代码
flexible.zip (684 Bytes, 下载次数: 0, 售价: 1 金豆)

3.jpg

回复

举报

返回列表 发新帖

QQ|网站地图|Archiver|手机版|金黑网络 ( 粤ICP备2021124338号 )

网站建设，微信公众号小程序制作，商城系统开发，高端系统定制，app软件开发，智能物联网开发，直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表