How To Add CSS Media Queries?

By: Sagar Motey Category: Web Development Technologies: CSS, javascript

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

Originally published at https://www.cryptextechnologies.com.

--

--

--

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Singleton Design Pattern in java

Flask Dashboard Black PRO— Designed by Creative-Tim, coded by AppSeed

Flask Dashboard Black PRO — Widgets Page.

What is the Template Method Design Pattern?

Gluster — Geo-replication

Geo-replication

What is Kanban

Lambda-Backed Custom Resource With Cloudformation

Two Steps Forward, One Step Back

Creational Design Patterns in Android: Singleton

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cryptex Technologies

Cryptex Technologies

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

More from Medium

How to Use Drag And Drop On HTML5 Canvas Element Using FabricJS

How to view local file(html/css) in iPhone

Phase 5: Space City Sneakers

ActiveRecord — CRUD