We'll now use media queries to target the properties of the device being used to view our page. The property max-device-width allows us to target the physical properties of the viewport - max-device-width: 480px, for instance, applies not when the browser window is resized to less than 480px, but rather when the device itself - a smartphone, say - has a viewport less than 480px wide.
To view your code on a smartphone or emulator, you will need to publish to a Web server; please refer to the setup instructions for more information on how to do this.
Consider the file MediaQueries/Demos/devicewidth.html. View this latest version of the Jazz Calendar home page on an iPhone, Android, or other smartphone device or on an emulator - you'll see that we've used media queries to selectively apply style rules just for devices with a maximum viewport width less than 480px: