Responsive Web Design - Media Queries

Responsive Web Design-Media Queries


Responsive Web Design - Media Queries
A media query is defined as an at-rule, @media. 
It specifies a medium (all, print, screen, or speech) and a condition.
If no medium is specified, it defaults to all. 
If the condition is met, the CSS rules inside the block are applied to the document. If it is not met, the CSS rules are ignored.
Now we will see the syntax - 
Media queries have an optional mediatype parameter. This parameter is placed directly after the @media declaration (@media mediatype).
We can add media queries in two ways - 
1. Using int the same page - 
Syntax - 
@media not|only mediatype and (expressions) {
  CSS-Code;
}
 
2. You want add in another page link that page using the following syntax - 
Syntax - 

 

"stylesheet" media="mediatype and|not|only (expressions)" href="sample.css">
 
Adding A Breakpoint
A breakpoint is the threshold at which a page’s layout will change due to the viewport size with a media query.
Defining your breakpoints is not an exact science, as there are many different devices in use today, all with different screen sizes. It’s better to set breakpoints based on the content. 
That is, you should try to avoid targeting specific devices with media queries. I
Instead, experiment with different viewport sizes, and find the points where your layout and design start looking cramped. Then you know where to set your breakpoints.
The main point of making something responsive is that it should look good.
Adapting a layout with media queries - 
There are still good use cases for media queries with responsive design, however. Let’s look at the page layout in the Example given below -
Now we will see an example –
Example –A page layout -
class="container">
 

class="header">Header


  class="main">
 

class="sidebar">
  "/home">Home
  "/about">About
  "/photos">Photos
 


 
class="content">
  Hello world!
 

 
class="sidebar2">
  Sidebar 2
 

 
 

class="footer">Footer

Output - 
If we decrease the viewport width, the main content area gets squashed between the two sidebars, as seen in image given below - 
NOTE -  We should design a layout for a mobile size display.
Mobile Layout
We can improve this by adding a media query and making a few overrides. 
Let’s set the breakpoint at 700 pixels. 
Below this threshold, we’ll change the main element to have a flex-direction of column rather than row. 
This will stack the three regions vertically, allowing them each to take up the full width of the container. 
The media query is shown -
Example 2 - The narrow layout
@media screen and (max-width: 700px) {
.main {
flex-direction: column;
}
}
Code-

 

class="container">
 

class="header">Header


  class="main">
 

class="sidebar">
  "/home">Home
  "/about">About
  "/photos">Photos
 


 
class="content">
  Hello world!
 

 
class="sidebar2">
  Sidebar 2
 

 
 

class="footer">Footer

 

Output -