当前位置: 主页 > 日志 > 个人日记 > 文章

模拟rpx效果

发布时间: 2023-08-25 14:11:36 作者: 王乐园 浏览次数: 879

原生html端模拟小程序rpx单位效果,在这里 将 rpx 替换为 rem


js代码

<script>
  function adjustFontSize() {
    var htmlElement = document.querySelector('html');
    var outerWidth = window.outerWidth || 750;
    var fontSize = outerWidth / 750; /* 根据屏幕宽度计算字体大小 */
    htmlElement.style.fontSize = fontSize + 'px'; /* 设置字体大小 */
  }
  adjustFontSize()
  window.addEventListener('resize', adjustFontSize); /* 监听屏幕尺寸改变事件 */
</script>


html中使用示例:将 rpx 替换为 rem

<img style="width:120rem;height:120rem;margin: auto;display: block;" src="/public/view_icon/logo.png" alt="" srcset="">
<p class="center" style="font-size:24rem;padding-top: 24rem;">文件系统(1个月)</p>

设置样式大小至就和rpx 750 的规则一样设置就行 X2


本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: