网页单位为(rem)时,js控制自适应字体大小

//  js部分:屏幕大小决定根元素字体大小
复制代码
(function flexible(window, document) {
  function resetFontSize() {
    const size = (document.documentElement.clientWidth / 1920) * 16;//1920为设计稿宽度
    if(document.documentElement.clientWidth>1920){
        document.documentElement.style.fontSize = 16 + 'px';
    }else if(document.documentElement.clientWidth>1200){
        document.documentElement.style.fontSize = size + 'px';
    }else if(document.documentElement.clientWidth<=1200){
        document.documentElement.style.fontSize = 12 + 'px';
    }
  }
  window.addEventListener('pageshow', resetFontSize);
  window.addEventListener('resize', resetFontSize);
})(window, document);
复制代码

//  css部分:媒体类型为@media规则,一般书写方式为

1
@media screen and (min-width: 1200px) and (max-width: 1919px){}
1
@media (min-width:1200px){}
1
@media (max-width:750px) {}

  

posted @   新手上线  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示