Question

例如，这里有一个fiddle，它显示了当宽度低于200px时如何更改字体。

@media (max-width: 200px) {
  .test {
    font-size:40px;
  }
}

如果你向右移动html窗口使其变小，你会看到它达到200px b.c.的点。字体会改变。

如果有人可以向小提琴添加动态div，以便将此值输出到窗口，这将是媒体查询的一个很酷的测试脚本。

此外，如果网络上有一个很好的参考，用于媒体查询的JavaScript界面。我希望有一个。我还没有找到它。

Answer 1

您可以向window.matchMedia

添加事件监听器

if (matchMedia) {
    var mq = window.matchMedia("(max-width: 200px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    if (mq.matches) {
        console.log('matches')
    }

}

<强> Demo

Answer 2

我使用过jQuery，希望这有帮助。

$( window ).resize(function() {
if($(window).width()<=200){
    $(".test").css("font-size","40px");
}
else{
    $(".test").css("font-size","20px");
} });

http://jsfiddle.net/7gup43rx/2/

Answer 3

这是你实际要求的。下面的代码段将输出媒体查询使用的维度。

http://jsfiddle.net/jbnt7nh1/8/

// some code - updated fiddle

这是开始阅读CSS中不同宽度的一个好点。

https://www.google.com/#q=quirksmode+screen+width

我可以使用JavaScript来获取媒体查询使用的维度吗？

3 个答案: