NCSS Media Queries

NCSS Media Queries restrict styling to specific devices. By using Media Queries in your styling you can neatly style a wide range of devices:

Phone Vs Tablet

To style just for phones and tablets specify both screen size and resolution.

The following examples target either phones. or tablets.

iPhone portrait

iPhone5 portrait

Samsung S2

Nexus 4

iPad Portrait

Galaxy Tab 7″

Galaxy Tab 10.1″


  
	@media max-device-width:480px and max-resolution: 200dpi,
	 max-device-width:800px and min-resolution: 200dpi {
	 #view > view{border:5px solid gold}
	 }

iPhone portrait

iPhone5 portrait

Samsung S2

Nexus 4

iPad Portrait

Galaxy Tab 7″

Galaxy Tab 10.1″


  
	@media min-device-width:480px and max-resolution: 200dpi,
	 min-device-width:800px and min-resolution: 200dpi {
	 #view > view{border:5px solid gold}
	 }

Landscape Vs Portrait

For a great style in different orientations, we recommend targeting specific ‘orientations’.

In the following examples we create specific styles for portrait or landscape devices.

iPhone portrait

Samsung S2

Galaxy Tab 7″

iPhone landscape

Samsung S2

Galaxy Tab 7″


  
	@media orientation: portrait {
		#view > view{
			border:5px solid gold
		}
	}

iPhone portrait

Samsung S2

Galaxy Tab 7″

iPhone landscape

Samsung S2

Galaxy Tab 7″


  
	@media orientation: landscape {
		#view > view{
			border:5px solid gold
		}
	}

High vs Low Resolution

To optimize for high resolution devices, we recommend specifying device resolutions.

In the following examples we create specific styles for low and high resolution devices.

iPhone

iPad

Galaxy Tab 7″

Galaxy Tab 10.1″

iPhone Retina

iPad Retina

Samsung S2

Nexus 4


  
	@media max-resolution: 200dpi  {
		#view > view{
			border:5px solid gold
		}
	}

iPhone

iPad

Galaxy Tab 7″

Galaxy Tab 10.1″

iPhone Retina

iPad Retina

Samsung S2

Nexus 4


  
	@media min-resolution: 200dpi  {
		#view > view{
			border:5px solid gold
		}
	}