Overview
In current trend of web design, there is a requirement of responsive view for web layout or mobile first design. There are several framework and tools available in the market for making responsive design, for example bootstrap, zurb-foundation, etc.
But main question is that: “How the design is converted into responsive mode?” And the solution behind this is so simple, that is the use of “media query“. You can also make site responsive without using bootstrap or zurb-foundation, only help with media query.
Media query is type of code which works in stylesheet format and the code which checks viewport and height as well as width of the device where the site is currently running. Based on that you can write css for that view.
Types of media
There are several type of media and which are as below:
- all – Suitable for all devices.
- aural – Intended for speech synthesizers.
- braille – Intended for braille tactile feedback devices.
- embossed – Intended for paged braille printers.
- handheld – Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
- print – Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.
- projection – Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.
- screen – Intended primarily for color computer screens.
- tty – Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
- tv – Intended for television-type devices.
Media types for web
But we are talking here for web so we take mainly two media type which is used for web and that are, “Print” and “Screen”
Print is mainly used for to define look and feel of print format.
Syntax :
@media print { }Screen is used for to changes layout view in different different device or resolutions.
Syntax :
@media screen { }For use of the web or specially website structure there are mainly four screen media query condition are used which decide where device is from that resolution or not, and add css regarding that resolution.
For Large device ( Large desktop, large laptop, high resolution monitor )
@media (min-width: 1200px) { }For Medium device ( desktop, laptop, simplemonitor )
@media (min-width: 992px) and (max-width: 1199px) { }For Small device ( Tablet)
@media (min-width: 768px) and (max-width: 991px) { }For Extra Small device ( mobile and Small Tablet, Phablet )
@media (max-width: 767px) { }The all above media query condition are for specific device width and default view as portrait, for an example if your device is “Iphone 6” than you device width is 375px and height is 667px so for that you have to write css in “Extra Small” device condition.
Orientation
Now, actual question is come when the device is switch in to landscape mode especially for small and Extra Small devices. For that you have to write another media query which contain orientation mode of the device, this media automatically determine mode of the device.
Portrait Orientation:
For Small device
@media (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { }For Extra Small device
@media (min-width : 0px) and (max-width : 767px) and (orientation : portrait) { }
Landscape Orientation:
For Small device
@media (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { }For Extra Small device
@media (min-width : 0px) and (max-width : 767px) and (orientation : landscape) { }For an example we take same case above on “iphone 6” the design in iphone portrait and landscape mode both are same because of they both come under the Extra Small device media query. But we want different styling in landscape mode of “iphone 6” so we need to write that style code under landscape mode orientation.
Conclusion
If you have a good hand on html and css so for making changes for responsive view you do not have to add bootstrap or zurb-foundation, you just simply write media query in your pre-written stylesheet and that’s it.