关于移动 web 端屏幕适配(rem)的介绍-木庄网络博客

关于移动 web 端屏幕适配(rem)的介绍

2022-02-22 03:30:05 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了移动 web 端屏幕适配(rem)。详细的介绍了移动 web 端屏幕适配（rem），内容挺不错的，现在分享给大家，也给大家做个参考。

前言

最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配（rem）这一块并没有真正理解，只是会用。

接下来，把自己的一些对移动 web 端屏幕适配（rem）的思考记录下来。

rem 介绍

rem 表示根元素（<html>）的 font-size 的大小。即如果根元素的 font-size 大小为 14px，则 1rem = 14px

rem 适配移动 web 端

适配效果

在不同尺寸的屏幕下，同一个元素的大小看起来不是一样大的，但是它们所占屏幕宽度的比例是一样的。

代码

// 在 html 文件的 head 标签中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 获取屏幕宽度（px）
    var hWidth = html.getBoundingClientRect().width;
    // 设置 html 标签的 font-size 大小为 hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>