How can we address the fact that people are still using Internet Explorer 8, 9 and 10, and media query is not supported on those browsers?

Option 1

One option is to use the Respond.js polyfill, which adds support for min-width and max-width. It can be found here: https://github.com/scottjehl/Respond

Option 2

Other option is to provide a separate style sheet compatible with those browsers by using a conditional comment:

<!--[if lte IE 8]>
	<link href="ie8only.css" rel="stylesheet">
<![endif]-->