CSS Media Queries – Responsive Design

Media query is a CSS technique introduced in CSS3. It is used for create responsive web design. Media query uses a @media rule to include a block of CSS properties only if a any specific condition is true.

Below show five different media rules and standard device width media rules :

  1. If the browser window width is 1024px or above

     
  2. If the browser window minimum width 768px  and maximum width 1023px

     
  3. If the browser window minimum width 480px  and maximum width 767px

     
  4. If the browser window minimum width 320px  and maximum width 479px

     
  5. If the browser window is smaller than 320px