模拟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
上一篇:(转载)追忆过往青春
下一篇:(转载)时光悠悠 岁月无言