美文网首页
字体自适应 rem单位

字体自适应 rem单位

作者: 七號7777 | 来源:发表于2020-11-10 09:13 被阅读0次

大屏字体自适应(rem)
vue
https://www.jianshu.com/p/fd5adf1c7c57

function setRem() {
    var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
    var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
    var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    document.getElementsByTagName("html")[0].style.fontSize = rem + "px";
}
window.addEventListener("load", setRem);
window.addEventListener("resize", setRem);

js
https://blog.csdn.net/qq_33635385/article/details/90205902?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-3-90205902.nonecase&utm_term=%E5%A4%A7%E5%B1%8F%E9%80%82%E9%85%8D%E7%9A%84%E5%AD%97%E4%BD%93

(function(doc,win){
     let fn = () => {
         let docEl = doc.documentElement,
             clientWidth = docEl.clientWidth;
         if (!clientWidth) return;
         docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
     }
     if (!doc.addEventListener) return;
     win.addEventListener('resize',fn);
     doc.addEventListener('DOMContentLoaded',fn);
 })(document,window);

相关文章

  • HTML学习之图片字体适配

    移动h5 图片字体等适配WebApp开发之--"rem"单位Rem实现自适应初体验手机端页面自适应解决方案—rem布局

  • html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小

    html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小自适应) 1.新建rem.js文件 (functi...

  • 字体自适应 rem单位

    大屏字体自适应(rem)vuehttps://www.jianshu.com/p/fd5adf1c7c57[htt...

  • echarts 等比伸缩

    问题 em、rem、vw 这些 CSS 单位真心好用,然而使用 echarts 的自适应却比较原始,字体大小是不会...

  • 一、自适应rem布局

    自适应处理:使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子...

  • CSS通用样式

    普通适配: 精确适配:rem为单位,实现包括字体大小、元素间距等的自适应,则需要body前加上几行js。因为pc谷...

  • css字体样式

    字体大小:font-size:16px/1rem;(px是像素单位,rem/em 相对单位,跟浏览器默认的字体大...

  • 前端

    1.字体样式 字体大小:font-size:16px/1rem;(px是像素单位,rem/em 相对单位,跟浏览器...

  • 移动端开发-01

    rem布局 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem...

  • 移动 web 开发 —— rem 布局

    1. rem 基础 rem 单位 rem(root em)是一个相对单位,类似于 em,em 是父元素字体大小。 ...

网友评论

      本文标题:字体自适应 rem单位

      本文链接:https://www.haomeiwen.com/subject/rsyxsktx.html