layui pc端字体自适应（rem）【jsp项目】

原创

已于 2022-07-15 10:45:53 修改 · 827 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #layui #css #javascript

于 2022-07-15 10:44:14 首次发布

该博客介绍了在layui框架下，如何实现PC端页面的字体自适应，通过引入特定脚本设定字体大小，确保在不同分辨率设备上都能正常显示。

首先我们得嵌入一段脚本，引入后就可以直接定义字体大小了，如果不引入脚本的话页面就会不生效

<script>
!function (e, t) { 
    function i() { 
      var t = n.getBoundingClientRect().width / 10; n.style.fontSize = t + "px", p.rem = e.rem = t 
    } 
    var a, r = e.document, n = r.documentElement, o = r.querySelector('meta[name="viewport"]'), l = r.querySelector('meta[name="flexible"]'), m = r.querySelector('meta[name="flexible-in-x5"]'), s = !0, d = 0, c = 0, p = t.flexible || (t.flexible = {}); 
    if (o) { console.warn("将根据已有的meta标签来设置缩放比例"); var u = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/); u && (c = parseFloat(u[1]), d = parseInt(1 / c)) 
    } else if (l) { var f = l.getAttribute("content"