如何使用Javascript驱动媒体查询？

Question

我想找到一种方法来使算法根据分辨率大小更改媒体查询缩放百分比，例如，每当宽度减小100像素时，缩放系数就会增加10％。

@media screen and (max-width: 2560px) {
   html {
       -moz-transform: scale(0.75, 0.75);
       zoom: 0.75;
       zoom: 0%;
   }
}



@media screen and (max-width: 1904px) {
   html {
       -moz-transform: scale(0.75, 0.75);
       zoom: 0.75;
       zoom: 73%;
   }
}

Answer 1

您需要捕获用户所做的任何屏幕调整，像这样...

 document.body.onresize=function(){MyAdjustments();};

然后调用该函数以应用必要的逻辑...

function MyAdjustments(){

 var W=screen.width, H=screen.height;

 // You've now got the new resolution so take whatever decisions are needed.

 }