网页单位为(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) {} |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通