17. Media Queries : CSS

Media Queries
Media Queries

What Is Media Query? 

  • Media inquiries are utilized when we need to tweak our site's show as per the client's screen size. With the assistance of media inquiries, you can show various markups dependent on the gadget's general type(mobile, work area, tablet). 
  • A media question is a logical activity. At whatever point a media question turns out to be valid, then, at that point, the connected CSS is applied to the objective component. 


Sentence structure Of Media Query : 

A media inquiry is made out of two things: media type and articulation. A media inquiry can contain at least one articulation. 


Sentence structure : 

@media media-type and (media-highlight) 

     /* CSS Rules to be applies*/ 


Model: 

@media screen and (max-width: 800px) 

#contents{width:90%} 

We should understand this model : 

  • @media: A media question consistently begins with @media. 
  • Screen: It is the pertinent media type. 
  • max-width: It is the media include. 
  • #contents{width:90%}: It is the CSS to be applied when the conditions are met. 


In this way, that is the way you can unquestionably incorporate various media inquiries relying on your requirements. Note that we have utilized an administrator to join two inquiries to be valid. You can likewise utilize different administrators, for example, not, just, and comma(,).

Post a Comment

0 Comments