Media Query and Device Orientation are CSS techniques which are used for the design of responsive websites. It uses syntax as “@media” which specifies the property of CSS only if the condition is true within the specified block.

Consider an example,

Where, the css code will only be applicable on the devices which have less than 497px width (i.e. a mobile device.)

Consider another example,

In the above example the css code will only be applicable for the devices which have more than 497px but less than 767px width (i.e. a tablet)

P.S: The keyword “only” used in above examples is to hide style sheets from older browsers.

We can also set the device screen size accordingly. Max and min width can be any value like 1px, 2px……..

There is a standard size of different devices as follow

 Minimum WidthMaximum Width
Mobile0px497px
Tablet497px767px or 768px
Large Screen Devices767px or 768px1024px or More
Media Query

Responsive_Web_Design

We can also define specific css for the devices according to their orientation (landscape or potrait). See below for more.

Media Query Orientation:-

Please consider the example below,

In the above example, the background color will be light blue when device is in landscape mode.

Another example having portrait view given below,

In the above example, the background color will be light blue when device is in Portrait mode.

Lets have an another example,

This code reflects the “lightgreen” background color on the device having max width 400px and applied when mode is portrait.

This code reflects the “lightgreen” background color on the device having max width 800px and applied when mode is landscape.

This is all about media queries. I hope this will help you to achieve a good responsive web page. If you liked the article please subscribe us, and if you have any problem, suggestion or query then please comment on the topic, we will be there at you as soon as possible.

You May Also Like

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

You have Successfully Subscribed!

Share This