系统界面16:9 4:3自适应

body指定最小高度和宽度,设计时页面数据不要太满

<body style="min-width:1366px;min-height:689px">

通过scale进行按比例缩小,这种设计是按照最大设计,该示例是1920*1080

    <script>
  //监听浏览器变化
    window.onresize = function() {
    	setAppScale();
    };
     
    function setAppScale() {
    	var ratioX = 1;
    	var ratioY = 1;
    	//小分辨率
    	if($(window).width()<1366){
        	console.log("-------:",$(window).width());
        	//transform中的参数为非整数,会导致字体模糊
    		var ratioX = $(window).width()/1366;
        	console.log("ratioX-------:",ratioX);
    	}
    	if($(window).height()<689){
        	console.log("-------:",$(window).height());
        	//transform中的参数为非整数,会导致字体模糊
    	 	var ratioY = $(window).height()/689;
        	console.log("ratioY-------:",ratioY);
    		
    	}
    	$("body").css({
			transform: "scale("+ratioX+","+ratioY+")",
			transformOrigin: "left top",
			overflow:"hidden"
		}); 
     }
     
     
    $().ready(function(){
            //初始化时调整大小
            setAppScale();
    });
    
    </script>

猜你喜欢

转载自blog.csdn.net/myfmyfmyfmyf/article/details/108224845