大屏项目自适应

适用于16：9的屏幕

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

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

 

 但是这种方式比较麻烦，可以写js来改变基值（初始进入页面px的值太小了，还没想到解决办法）

 

 

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();

 

 

----------------------------------------------新版-------------------------------------------------------------

<script>
    var c=()=>{

        let value =( 1920 / 1080)
        let w = 0
        let data = (document.documentElement.clientWidth/document.documentElement.clientHeight)

        console.log(Math.round(1.23))
        console.log("8989898******99")

          

        if(Math.round(data)  >= Math.round(value) ){
            w = value * document.documentElement.clientHeight
        }else {
            w = value * document.documentElement.clientWidth
        }

        console.log(document.documentElement.clientWidth)
        console.log(document.documentElement.clientHeight)

        console.log(Math.round(data))
        console.log(Math.round(value))

        if(Math.round(data)  <= Math.round(value)){
            document.getElementById('titleId').className = 'title01'
            w = value * document.documentElement.clientHeight*0.7
            document.getElementById('contentID').className = 'float_info_content01'
            document.getElementById('closeID').className = 'float_info_div_close01'
            document.getElementById('divTitle').className = 'float_info_div_title01'
            document.getElementsByClassName("float_name")[0].style="position:absolute;top:7%;left:31%;"

        }  

        console.log("W" + w)
        let n = w / (1920 / 10) + "px"
        console.log("kokoko" + n)
        document.documentElement.style.fontSize=n;  1920*1080下为10px
    }
    window.addEventListener("load",c);
    window.addEventListener("resize",c);

</script>