CSS Media Queries

My Account

Mijn Account

Mon Compte

Mein Konto

我的帐户

Inloggen

Connexion

Anmeldung

Acceso

CSS Media Queries

Media queries to help designers & developers save some time searching. I'll try to continue adding as much media queries as possible.

iPad | portrait & landscape

Code

@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

iPad | portrait

Code

@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
/* STYLES GO HERE */
}

iPad | landscape

Code

@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
/* STYLES GO HERE */
}

iPhone X | portrait & landscape

Code

@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px)
  and (-webkit-device-pixel-ratio : 3) {
/* STYLES GO HERE */
}

iPhone X | portrait

Code

@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px) 
  and (-webkit-device-pixel-ratio : 3)
  and (orientation : portrait) {
/* STYLES GO HERE */
}

iPhone X | landscape

Code

@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px) 
  and (-webkit-device-pixel-ratio : 3)
  and (orientation : landscape) {
/* STYLES GO HERE */
}

Phones | portrait & landscape

Code

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) {
/* STYLES GO HERE */
}

Phones | portrait

Code

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation : portrait) {
/* STYLES GO HERE */
}

Phones | landscape

Code

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation : landscape) {
/* STYLES GO HERE */
}

CSS3

css3

CSS Media Queries

iPad | portrait & landscape

iPad | portrait

iPad | landscape

iPhone X | portrait & landscape

iPhone X | portrait

iPhone X | landscape

Phones | portrait & landscape

Phones | portrait

Phones | landscape

CSS View Transitions Will Change Web Design in 2025

This CSS Property Replaces Hundreds of Lines of Code

Web Dev Simplified | Stop Using Pixels For Media Queries

The CSS Display Property is Changing Forever

CSS Just Changed Forever | 7 New Features You Don't Know

Modern CSS for Sites | View Transitions and Scroll Effects

Laravel Daily | Quickly View SQL Queries in Laravel with DB::listen

New in Chrome 125 | CSS anchor positioning and more

Keeping up with CSS | The features released in 2023

What's New in Google Chrome 118 | The @scope CSS rule is here

New in Chrome 117 | CSS for Smooth Entry & Exit Animations

CSS Anchor is The Best New CSS Feature Since Flexbox

Hyperplexed | I Fired a CSS Cannon at a Famous Streamer

Kevin Powell | Getting Started with CSS Nesting

New in Laravel 10.15 | Dump SQL Queries With Parameters

How To Create This Unbelievable CSS Scroll Animation

Lukas | Top 10 CSS Features You Should Know and Use in 2023

New in Chrome 112 | CSS Nesting Rules and more!

New in Chrome 111 | View transitions API and more!

Useful & Responsive Layouts| No Media Queries required

Fireship | Tailwind CSS is the Worst…

New in Chrome 109 | OPFS on Android, new css properties

Create a Cool Color-Fill Animation with CSS

Can ChatGPT write decent CSS?

Award Winning Animation With Only 20 Lines Of CSS?

Responsive CSS Will Never Be The Same

Top 10 CSS One Liners That Will Blow Your Mind

The Best of CSS | Tailwind vs MUI vs Bootstrap vs Chakra vs...

I never thought this would be possible with CSS

New in Chrome 105 | Container Queries and More!