Please enable JavaScript.
Coggle requires JavaScript to display documents.
Important Criterias to build Responsive Web Design using Media Queries…
Important Criterias to build Responsive Web Design using Media Queries
What is Media Query?
A CSS technique introduced in CSS3 which uses the media rule to include a block of CSS properties only if a certain condition is true
e.g. If the browser window is 600px or smaller, the background color will be changed accordingly
Add a breakpoint
Media queries can help a responsive web page with rows and colums look good on small screen by adding a breakpoint
A breakproint can be added where certain parts of the design will behave differently on each side of the breakpoint
e.g. When the screen (browser window) gets smaller than 768px, each column should have a width of 100%
Always design for Mobile First
Mobile First means designing for mobile before designing for desktop/any other device which allows the page to display faster on smaller devices
Instead of changing styles when the width < 768px, the design should be changed to > 768px which allows the design to be Mobile First
Another breakpoint
Add as many breakpoints as you want
e.g. Adding one more media query (at 600px) and a set of new classes for devices larger than 600px (but smaller than 768px)
Typical Device Breakpoints
There are tons of screens and devices with different heights and widths so it is hard to create an exact breakpoint for each device so five groups can be targetted instead
Extra small devices (phones, 600px and down)
Small devices (portrait tablets and large phones, 600px and up)
Medium devices (landscape tablets, 768px and up)
Large devices (laptops/desktops, 992px and up)
Extra large devices (large laptops and desktops, 1200px and up)
Orientation Portrait/Landdscape
Media queries can also be used to change layout of a page depending on the orientation of the browser; such as set of CSS properties that will only apply when the browser window is wider that its height, a so called "Landscape" orientation
e.g. The web pge will only have a lightblue background if the orientation is in landscape mode
Hide Elements with Media Queries
Hide elements on different screen sizes
Change Font Size with Media Queries
Change the font size of an element on different screen sizes