rem实现屏幕适配（jQuery）

一、rem换算

1.根据视口宽度动态计算字体大小，如果宽度大于750px，则将字体大小设置为100px，否则按比例缩小。
tips:使用时记得引入jQuery.js

        //  在文档加载完成后执行函数，确保DOM已经准备就绪$(function () {// 定义一个自执行的函数，参数n代表document，e代表window !function (n, e) {// 获取文档的根元素，也就是html元素var t = n.documentElement,// 判断设备是否支持orientationchange事件，支持则使用该事件，否则使用resize事件i = "orientationchange" in window ? "orientationchange" : "resize",// 定义一个函数，用于调整根元素的字体大小d = function () {// 获取设备视口宽度var n = t.clientWidth;//    根据视口宽度调整字体大小，确保字体大小不超过100pxn && (t.style.fontSize = (n > 750 ? 750 : n) / 750 * 100 + "px")};// 如果浏览器支持addEventListener方法，则添加事件监听器 n.addEventListener && (e.addEventListener(i, d, !1), d(), n.addEventListener("DOMContentLoaded", d, !1))}(document, window);})

2.效果演示
在这里插入图片描述

二、vscod中安装px to rem & rpx & vw (cssrem)插件

1.安装px to rem & rpx & vw (cssrem)插件
在这里插入图片描述
2.配置该插件

3.使用插件
编写css样式时可正常使用px，插件会根据前面的设置自动换算

三、完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.test {width: 1rem;height: 1rem;background-color: red;}</style>
</head><body><div class="test"></div><script src="./jquery-1.10.2.js"></script><script>//  在文档加载完成后执行函数，确保DOM已经准备就绪$(function () {// 定义一个自执行的函数，参数n代表document，e代表window !function (n, e) {// 获取文档的根元素，也就是html元素var t = n.documentElement,// 判断设备是否支持orientationchange事件，支持则使用该事件，否则使用resize事件i = "orientationchange" in window ? "orientationchange" : "resize",// 定义一个函数，用于调整根元素的字体大小d = function () {// 获取设备视口宽度var n = t.clientWidth;//    根据视口宽度调整字体大小，确保字体大小不超过100pxn && (t.style.fontSize = (n > 750 ? 750 : n) / 750 * 100 + "px")};// 如果浏览器支持addEventListener方法，则添加事件监听器 n.addEventListener && (e.addEventListener(i, d, !1), d(), n.addEventListener("DOMContentLoaded", d, !1))}(document, window);})</script>
</body></html>