How To Add CSS Media Queries?

How To Add CSS Media Queries?

15 Sep 2022
0 Comments
How To Add CSS Media Queries?

By: Category: Ruby on Rails,Web Development Technologies: Ruby on Rails, CSS

The Media query in CSS is utilized to make a responsive website design. It means that the perspective on a website page differs from one system to another based on screen or media types. The breakpoint indicates for what device-width size, the content is simply beginning to break or twist.
 

Media queries can be utilized to check many things:

  • Width and height of the viewport
  • Width and height of the device
  • Orientation
  • Resolution

A media query is comprised of a media type that can contain one or more expressions that can be either true or false. The result of the query is valid if the media matches the type of device the report is shown on. if the media query is valid, then a style sheet is applied.


Syntex:

@media not | only mediatype and (expression) {
    // Code content
}


Supported Browsers: The browser supported by CSS media queries are listed below:

  • Chrome 21.0 and above
  • Mozilla 3.5 and above
  • Microsoft Edge 12.0
  • Opera 9.0 and above
  • Internet Explorer 9.0 and above
  • Safari 4.0 and above


Example:

The following example changes the background color to -

- darkgrey if the viewport is 325 pixels wide or wider

- yellow if the viewport is 375 pixels wide or wider

- red if the viewport is 425 pixels wide or wider

- green if the viewport is 768 pixels wide or wider

- lightgrey if the viewport is 992 pixels wide or wider

css-media-query




Leave a comment:

Recent Blogs