There are caveats when working with mobile and tablet devices due to their varied screen sizes, shapes and resolutions. There are several CSS features that can be employed to adapt your application's display for different devices.
The @media rule can be used to apply styles for a particular medium and resolution. In practice, this is often used to target different screen resolutions and to change the application styles for mobile, tablet and desktop devices.
Media queries can be used to select for the following:
- Resolution
- Width and height
- Orientation, either potrait or landscape
- Device type, either displayed on-screen or printed