移动端rem布局js代码，横竖屏适配

最新推荐文章于 2024-08-01 16:35:03 发布

泡芙is

最新推荐文章于 2024-08-01 16:35:03 发布

阅读量2.5k

点赞数

文章标签： rem 适配js 横竖屏处理

本文链接：https://blog.csdn.net/baozisss/article/details/83016375

版权

最开始做移动端项目的时候，页面适配并没有考虑横屏的情况。后续因为手机开启可以旋转状态，整体布局出现了问题。

所以对适配作出了相应调整：

detectOrient();
window.onresize = function(){
	detectOrient();
};
//判断横屏竖屏
function detectOrient() {
	var width = document.documentElement.clientWidth,
        height = document.documentElement.clientHeight;
    if(width <= height) {//竖屏   
    	if ( 320 > width ) {
		  width = 320;
		}
		if(width > 750){
			width = 750;
		}
		document.getElementsByTagName("html")[0].style.fontSize = width/7.5 + "px";
        return false;
    } else{//横屏     
    	if ( height > width ) {
		  height = 320;
		}
		if(height > 750){
			height = 750;
		}
		document.getElementsByTagName("html")[0].style.fontSize = height/7.5 + "px";
        return false;
    }
}