使用 javascript 进行媒体查询答案

【问题标题】：media query with javascript使用 javascript 进行媒体查询
【发布时间】：2019-08-28 02:57:01
【问题描述】：

代码不能 100% 工作。仅当我重新加载页面时才有效。我希望某些代码在“size 699”时可见。

我也试过这段代码 http://www.javascriptkit.com/dhtmltutors/cssmediaqueries4.shtml

<script>
function myFunction(x) {
  if (x.matches) { // If media query matches

/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */

mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +

"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +


"</div>" +
"</div>";       

var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);

} else {

/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */

mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +

"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +


"</div>" +
"</div>";       

var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);


}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes



</script>

我希望媒体查询在调整浏览器大小时始终有效

【问题讨论】：

窗口宽度的事件监听器在哪里？

标签： javascript html mpmediaquery

【解决方案1】：

我很确定您需要设置一个窗口 EventListener 来调整大小并在每次更新时调用 matchMedia（可能想要限制 eventListener，因为它实际上只需要每 50-100 毫秒左右更新一次）

有一个很棒的库，用于在 Javascript 中进行媒体查询，称为 Enquire.js，如果您不想使用完整的包，您可以检查 github 上的项目 src 以帮助您解决特定的用例？

https://wicky.nillia.ms/enquire.js/

【讨论】：