How to Use Media Queries for Responsive Design?

Media Query plays an important role to make a website responsive or device friendly. By using media query we can easily style our website according to device size.  Media Query has some breakpoints by using these breakpoints we can manage our website on a particular device.

Mobile Vertical View Breakpoints:

1. 320px: 320px is used for a mobile device that is less than 5 inches.

Example: Sony Xperia, iPhone SE, etc.

2. 360px: 360px is used for a mobile device that is between 5 inch to 6 inch.

Example: Galaxy s5

3. 414px: 414px is used for a mobile device that is greater than 6 inches.

Example: iphone11,iphone 11 pro etc.

 

Mobile Horizontal View Breakpoints

1. 568px: 568px is horizontal view of 320px device which is less than 5 inch.

2. 640px: 640PX is horizontal view of 360px device which is between 5 inch to 6 inch.

3. 736px: 736px is horizontal view of 414px device which is greater than 6 inch.

 

Tablet/Ipad Breakpoints

1. 768px to 1024px: This size is used for vertical view of tablet, ipad.

2. 1024px to 1366px: This size is used for ipad pro device.

Syntax to Write Media Query:

@media <media_type> connector ( <query> )

Example:

@media only screen and (max-width:360px)
{
  /* write css rules here */
}

This media query will work only on-screen, which is less than 360px size.

There are different media types which are following:

• all
• print
• screen
• speech

 

Example:

@media print
{
  h1
{
font-size:18px;
}
}

This media query will make h1 font-size 18px when the pages need to be printed.

 

Important Points:

1. Always use media query in descending order, which means always write small size at the end.

2. Always write media query at the end of desktop styling CSS, if we write in middle then it may disturb our desktop design, so always try to write at the end of desktop CSS.

Categories: web designing css