CSS Media Queries

Screen Size Maximums

Laptops or Smaller

Everything smaller than a desktop screen

@media (max-width: 1280px) {

}

Tablets or Smaller

Everything smaller than a Laptop Screen

@media (max-width: 1024px) {

}

Small Tablets or Smaller

Everything smaller than a standard tablet screen

@media (max-width: 767px) {

}

Smartphones or Smaller

Standard Smart Phones or smaller

@media (max-width: 480px) {

}

Screen Size Minimums

Desktops or Larger

Standard Size Desktops or Larger

@media (min-width: 1281px) {

}

Tablets or Larger

Standard Size Tablets and Smaller

@media (min-width: 1025px) {

}

Small Tablets or Larger

Small tablets (Portrait), Smartphones (Landscape) and smaller

@media (min-width: 768px) {

}

Anything Larger than Smartphones

Anything larger than a standard smart phone

@media (min-width: 481px) {

}

Screen Size Ranges

Desktops & Larger

1281px to higher resolution screens

@media (min-width: 1281px) {

}

Laptops

Laptops & Small Desktops

@media (min-width: 1025px) and (max-width: 1280px) {

}

Tablets - (Portrait)

Tablets & Ipads, Portrait Orientation

@media (min-width: 768px) and (max-width: 1024px) {

}

Tablets - (Landscape)

Tablets & Ipads, Landscape Orientation

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

Small Tablets

Small tablets (Portrait) & Phones (Landscape)

@media (min-width: 481px) and (max-width: 767px) {

}

Smartphones

Typical smart phones (Portrait)

@media (min-width: 320px) and (max-width: 480px) {

}

Share This:

THE STUDIO

101 South Main Street
Suite 101
Memphis, TN 38103

Copyright 2024 New Urban Media

Accredited Agency

A+ Rating since 06/01/2018

5 Star Rating

15+ Google Reviews | ⭐️⭐️⭐️⭐️⭐️