Hello Friends,

Today I am going to introduce some new things to achieve a good responsive behavior for web page. As we know that Today responsive layout design is mostly required. There are some CSS techniques which help us to get the exact result.

Media Queries

A media query is one of the elements of a media type that allow the style-sheets scope by using media features, like- width, height, color etc. Here are some types of media queries with example.

- Dimension Type Media Queries

Example

 @media screen and (width: 480px) { body { background-color:}

- Device Oriented Type Media Queries

Examples

  @media screen and (max-device-width: 799px) {  } 
  @media screen and (device-width: 800px) {  } 
  @media screen and (min-device-width: 801px) {  }
  @media screen and (device-aspect-ratio: 4/ 3) {  }
  @media screen and (min-aspect-ratio: 8/ 5) {  }
  @media screen and (orientation: portrait) {  }

- Combining All Type Media Queries

@media all and (orientation: landscape) and (min-width: 800em) {  }