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

【问题标题】：How to drive media queries with Javascript?如何使用 Javascript 驱动媒体查询？
【发布时间】：2019-03-28 23:56:27
【问题描述】：

我想找到一种方法来制作一种算法，该算法可以根据分辨率大小改变我的媒体查询缩放百分比，例如，每当宽度减小 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%;
   }
}

【问题讨论】：

缩放是非标准功能，可能不应该在生产中使用：developer.mozilla.org/en-US/docs/Web/CSS/zoom
另外，你能不能只为每减少 100px 编写媒体查询？如果你让 js 参与进来，你会在 js 加载和启动时得到无样式内容的闪光
嗨，@BriannaDevos。如果你重新格式化你的问题，你会得到更多的反馈。由于您是新来的，我建议您阅读"How to ask"。这将帮助您获得更好的结果。

标签： javascript css media-queries

【解决方案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.

 }

【讨论】：