NativeCSS StudioNCSS 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
}
}