有时候我们需要在页面脚本里用程序的方式做媒体查询，然后再根据查询结果去执行一些动作。

打开页面的脚本文件，main.js，先声明一个 mediaQueryList，它的值可以用一下 window 对象上的 matchMedia 这个方法，给这个方法提供一个媒体查询字符，一组引号，里面是一组括号，媒体特性可以用一下 orientation，表示设备方向，值是 landscape。意思就是看一下设备方向是不是水平方向。

为了测试这个功能，我们可以在匹配查询的时候把页面背景设置成一种颜色，不匹配的时候把背景设置成白色。

定义一个方法，名字叫 onOrientationChange，当方向变化时，它是一个函数，有个 mediaQueryList 参数，方法里声明一个 bodyElement，它的值用一下 document.querySelector，提供一个 body。

下面判断一下 mediaQueryList.matches 是不是 true，如果查询的结果是真的，这个属性的值就是 true，不匹配的时候它的值就会是 false 。

如果匹配查询结果，设置一下 bodyElement.style.background，让它等于 lavender，也就是如果设备方向是水平方向，它的背景颜色就会变成这种薰衣草颜色。 else ，如果不匹配，就把 bodyElement.style.background 设置成 white ，也就是白色。

在方法的下面，我们再用一下 mediaQueryList 上面的 addEventListener ，添加一监听器，监听的事件是 change，媒体查询结果发生变化时，可以执行一下这个 onOrientationChange 这个函数。

下面在浏览器上测试一下。打开浏览器的响应式设计模式，然后点击这个方向小图标调整一下设备的方向，当设备是水平方向是，页面的背景颜色就会变成 lavender，再调整一下，如果设备是垂直方向时背景颜色就会变成白色。

你也可以在自己的手机，或者模拟器上测试一下这个效果，改变设备的方向，页面的背景颜色会发生变化。因为我们在页面的脚本里监听了查询设备方向的结果，当这个结果发生变化的时候，就会改变页面的 body 这个元素的背景颜色。