请老师教我怎么调font-size大小适合页面大小，又可以随页面变化

来源：2-4 首页-头部搜索

鹿人神经粉

2020-02-26 13:40:41

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>rem 脚本</title>    <script type="text/javascript">        // rem脚本写在最前面是为了最快得到解析         (function() {            var docEl = document.documentElement;
            function setRemUnit() {                //获取到 rem 的基准值   10: 系数，一般是10                var rem = docEl.clientWidth / 10;                //动态设置html根元素的font-zise 值                docEl.style.fontSize = rem + 'px';            }            setRemUnit(); //写了这个 html标签一开始才会显示font-size
            //窗口大小变化时触发  resize事件            window.addEventListener('resize', setRemUnit);
            // Window 对象表示浏览器中打开的窗口            // 窗口出现在当前屏幕时(有浏览器兼容性) pageshow页面显示            window.addEventListener('pageshow', function(e) {
                // console.log(e) // PageTransitionEvent 当网页在加载完成或卸载后会触发页面传输事件                if (e.persisted) { // 如果浏览器是被激活状态的                    setRemUnit(); // 重新调用setRemUnit，适配页面显示
                }            })        })(); // Elements显示<html lang="en" style="font-size: 85.1px;" class="">    </script>    <link rel="stylesheet" type="text/css" href="Untitled-1.css">    <link rel="stylesheet" type="text/css" href=""></head>
<body>    <div class="div1">        当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发) 当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发) 当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发) 当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload        事件触发后初始化页面时触发) 当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)    </div></body>
</html>

Untitled-1.css：

@media (max-width: 575px) {

.div1 {

font-size: .586667rem;

background: rgb(197, 10, 41);

}

@media (min-width: 576px) and (max-width: 767px) {

/* 大于576 小于767 */

.div1 {

font-size: .64rem;

background: pink;

}