首页 > 其他分享 >大屏项目自适应

大屏项目自适应

时间:2023-02-21 09:24:02浏览次数:35  
标签:项目 htmlDom 适应 window html rem 大屏 font size

适用于16:9的屏幕

1.项目中用的px均转换成rem,可以在vscode中下载插件cssrem,会给出rem值

2.在index.html中使用媒体查询改变rem的基值

 

 但是这种方式比较麻烦,可以写js来改变基值

 

 

function setFont() {
                let window_width = window.innerWidth;
                let font_size = parseFloat(window_width / 1920 * 12);
                // console.log(font_size);
                let htmlDom = document.getElementsByTagName('html')[0]
                 htmlDom.style.fontSize = font_size + 'px';
                console.log(htmlDom.style.fontSize)
            //     $('html').css('font-size', font_size);
            }
            setFont();

 

标签:项目,htmlDom,适应,window,html,rem,大屏,font,size
From: https://www.cnblogs.com/brillant/p/17139712.html

相关文章