页面自适应设置--屏幕适配

页面自适应

在html中进行页面自适应

head中加入下面代码

 <script>
        if (window.innerWidth <= 600) {
     
            let html = document.getElementsByTagName('html')[0]
            html.style.fontSize = (14 * window.innerWidth) / 375 + 'px'
        }
        window.onresize = function () {
     
            let html = document.getElementsByTagName('html')[0]
            html.style.fontSize = (14 * window.innerWidth) / 375 + 'px'
        }
        window.onload = () => {
     
            let html = document.getElementsByTagName('html')[0]
            html.style.fontSize = (14 * window.innerWidth) / 375 + 'px'
        }
    </script>

在css样式中添加代码

html{
     
	font-size:14px; // 所有测量的结果转换为rem 
	// rem  ==  测量的px  /  14px    
	// 得到的结果为rem  可以设置为10px 计算更方便
}

你可能感兴趣的:(JavaScript,css)