根据屏幕宽度将onclick事件处理程序添加到HTML元素

Question

有一个<div>元素带有CSS规则：

div { height: 100px; width: 100%; }

<div></div>

当浏览器的宽度为全屏且用户点击<div>时，什么也没有发生。

但是，一旦浏览器的宽度达到屏幕的50％，并且当用户单击<div>时，其背景颜色就会变为黄色。

我的问题是：

1）用HTML，CSS和Javascript实现此功能的最佳实践（最佳方法）是什么？

2）是否可以仅使用HTML和CSS来实现？ （也许使用媒体查询？）