Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

程序的响应式处理 matchMedia

  现代浏览器的响应式设计在CSS方面只要@一下media就可以简单实现。虽然响应式设计更注重CSS,但程序放面也可能存在根据不同media做出不同行为的需求。在现代浏览器上可以通过调用matchMedia方法得到一个对象,然后添加监听回调函数来切换不同media上的行为。
  其实这个matchMedia有点柯里化的感觉。实际上我们要做的是监控某个media的变化状态,但操作起来是先取得一个对象,然后再添加监听函数。下面就是使用的例子,拖动浏览器边缘修改浏览器窗口大小后,当宽度在500左右变化时候触发。 <script>
//先match一个media
var w500=matchMedia("(max-width:500px)");
//添加监视,当match状态变化时触发
w500.addListener(function(e){
  console.log(e.matches);
});
</script>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^