CSS Media Queries

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Media Queries

CSS media queries are a powerful tool used by web developers to create responsive websites. They allow developers to write code that will make a website look different depending on the size of the device that it is being viewed on. This means that one website can be tailored to look great on a desktop, a laptop, a tablet, and a phone, all without having to create multiple versions of the same website.

CSS media queries are written using the @media rule. This rule takes a media type (such as screen or print) and a condition (such as width or orientation) and applies the code within the brackets only when the condition is met. For example, a media query could be written to only apply the code if the device has a width of less than 600px.

Media queries are used for the following:

• To conditionally apply styles with the CSS @media and @import at-rules.
• To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.
• To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

CSS3 Media Types: all, print, screen, speech

In HTML

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

In CSS

@media screen {
  body {
    width: 75%;
  }
}
Or:
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}