Responsive design is a key approach in modern web development, focused on making sure websites look and work great on all kinds of devices and screen sizes. Media queries help with this by adjusting the layout or appearance of a website based on things like screen resolution or the width and height of the browser window.
Media queries are a handy CSS tool that lets developers change the look of webpage based on certain conditions, like the browser's width and height, screen resolution, or whether the device is in landscape or portrait mode. They are essential for building responsive designs that adapt the layout, style, and content to fit the user's device perfectly.
Here are some examples of media queries that focus on specific details like screen resolution and the width and height of the browser window.
» Screen resolution
/* Apply styles for devices with a screen resolution of 1920x1080 or higher */
@media screen and (min-resolution: 192dpi) {
/* CSS rules */
}
/* Apply styles for devices with a screen resolution between 1024x768 and 1280x800 */
@media screen and (min-resolution: 1024x768) and (max-resolution: 1280x800) {
/* CSS rules */
}
» Browser Viewport Width and Height
/* Apply styles for viewports with a width of 600px or larger */
@media screen and (min-width: 600px) {
/* CSS rules */
}
/* Apply styles for viewports with a height of 800px or smaller */
@media screen and (max-height: 800px) {
/* CSS rules */
}
/* Apply styles for viewports with a width between 768px and 1024px, and a height between 600px and 800px */
@media screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 800px) {
/* CSS rules */
}
» Aspect Ratio
/* Apply styles for viewports with an aspect ratio of 16:9 */
@media screen and (aspect-ratio: 16/9) {
/* CSS rules */
}
» Orientation
/* Apply styles for devices in portrait orientation */
@media screen and (orientation: portrait) {
/* CSS rules */
}
/* Apply styles for devices in landscape orientation */
@media screen and (orientation: landscape) {
/* CSS rules */
}
In the examples above, we use logical operators like `not`, `and`, `only`, and `or` to build more complex media queries. We also see that `min-width` and `max-width` are commonly used features. These help determine styles based on the width of the viewport.
There are plenty of units that can provide more flexibility and scalability, especially when working with media queries.
- px (Pixels): control over element sizes, especially for small components or when exact dimensions are required.
For example:
.element {
width: 200px;
height: 100px;
}
- % (Percentage): create responsive layouts that adapt to changes in the size of the parent container.
For example:
.container {
width: 80%;
}
- em: create layouts that scale proportionally with changes in font size.
For example:
.text {
font-size: 1.2em; /* 1.2 times the font size of the parent element */
}
- rem (Root Em): Rem units are relative to the font size of the root element (<html>), offering a consistent sizing reference.
For example:
html {
font-size: 16px; /* Base font size */
}
.text {
font-size: 1.2rem; /* 1.2 times the base font size */
}
- vw (Viewport Width): create layouts that respond to changes in viewport width, such as fluid typography or scaling elements proportionally.
For example:
.element {
width: 50vw; /* 50% of the viewport width */
}
In addition to media queries, the Viewport Meta tag plays a big role in website responsiveness. It works by adjusting the webpage's width to fit the device's screen and managing the initial zoom levels.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Breakpoints are the conditions in Media Queries, like `max-width` and `min-width` values, that trigger style changes. They usually indicate when a major layout shift happens, like moving from single-column layout on mobile to multi-column layout on tablets and desktops.
Common device sizes: Small devices (like smartphones), Medium devices (like tablets), and Large devices (like desktops) are general terms used to categorize breakpoints based on common device sizes.
/* Small devices (phones, 320px to 480px) */
@media (max-width: 480px) {
.container {
display: block;
width: 100%;
}
}
/* Medium devices (tablets, 481px to 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
.container {
display: flex;
flex-direction: column;
width: 80%;
}
}
/* Large devices (desktops, 1025px and up) */
@media (min-width: 1025px) {
.container {
display: flex;
flex-direction: row;
width: 70%;
}
}
Common screen sizes: Typically fall into three main categories: Mobile, Tablets and Desktops.
/* Extra Extra Small (Mobile Portrait) */
@media (max-width: 320px) {
/* CSS rules for screen sizes up to 320px */
}
/* Extra Small (Mobile Landscape) */
@media (max-width: 480px) {
/* CSS rules for screen sizes up to 480px */
}
/* Small (Large Mobile) */
@media (max-width: 640px) {
/* CSS rules for screen sizes up to 640px */
}
/* Medium (Tablet, switches to desktop view in certain themes) */
@media (max-width: 768px) {
/* CSS rules for screen sizes up to 768px */
}
/* Large (Small Desktop) */
@media (max-width: 1024px) {
/* CSS rules for screen sizes up to 1024px */
}
/* Extra Large (Large Desktop) */
@media (max-width: 1440px) {
/* CSS rules for screen sizes up to 1440px */
}
Sizes like 320px, 480px, 640px, 768px, 1024px, and 1440px are common viewport width thresholds used in responsive design frameworks. Within these frameworks, container widths are adjusted to make sure the content fits well at different screen sizes.
Popular frameworks like Bootstrap, Foundation, Bulma, and Tailwind CSS each have their own standard breakpoint sizes, which will be covered in the next section. Also, you can check out the Material Design Responsive Breakpoints using the link provided. here.
In WordPress, you can use Elementor Builder to debug and see how sizes are generated when you inspect the site in your browser. To check and adjust breakpoints, just go to Site Settings > Layout > Breakpoints.
When you define media query like `@media (max-width: 767px)`, it targets all devices with viewport width of 767 pixels or less. The next media query for tablets or desktops could start at 768px (e.g., `@media (min-width: 768px)`).
Common Breakpoints Breakdown:
There are several popular CSS frameworks out there that help with responsive website design by offering predefined classes and powerful CSS. Let us take a look at a few of these frameworks and see how they can be used on our website.
You can check out the URL here for insights into the popularity and trends of different CSS frameworks from the 2023 "State of CSS" survey. Now, let us dive into the responsive breakpoints defined by some of the popular CSS frameworks.
» Bootstrap
» TailwindCSS
» Materialize CSS
» Foundation
» Ant Design
Breakpoints like `xs`, `sm`, `md`, `lg`, `xl`, and `xxl` are common in CSS frameworks. They play a crucial role in defining and applying responsive classes, ensuring layouts adjust smoothly across different screen sizes. For example:
1. Media Queries:
@media (min-width: 768px) {
/* Styles for devices 768px and wider (md and up) */
}
2. Responsive Utility Classes:
<div class="col-sm-6 col-md-4 col-lg-3">
<!-- This element will be half-width on small devices, 1/3 on medium, and 1/4 on large -->
</div>
Let us break it down with an example. Here’s how the columns will look on different screen sizes:
If you are working with Tailwind CSS and want to create a responsive grid layout, you can use Tailwind’s handy utility classes for columns.
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- This element will be using Grid layout -->
</div>
It is clear that we have:
Thus, when you are using CSS framework for front-end design or styling SPA components like React or Vue, it is key to get to know the specific terms and principles of the framework.
This will make designing responsive layouts much easier. Up next, we will dive into some practical tips for creating responsive websites.
When building CSS, we start with the basic styles, then move on to styles that handle how elements should adapt in different situations, like on smaller screens. Finally, we focus on creating reusable styles that can be applied directly to elements based on their function, helping ensure everything stays consistent.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<style>
/* Base styles */
.container {
display: flex;
}
.sidebar {
width: 250px;
background: #f4f4f4;
padding: 20px;
}
.main-content {
flex: 1;
padding: 20px;
}
.menu-toggle {
display: none;
}
/* Behavioral CSS for breakpoints */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
display: none;
}
.menu-toggle {
display: block;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<aside class="sidebar">Sidebar</aside>
<main class="main-content">Main Content</main>
<button class="menu-toggle">☰</button>
</div>
</body>
</html>
You will see the menu toggle show up when the screen size goes below 768px.
With utility classes, it is easier to manage and update styles. Instead of searching through multiple styles or components for repeated values, you can modify single class.
/* Utility classes for padding */
.p-20 {
padding: 20px;
}
/* Utility class for background */
.bg-light-gray {
background-color: #f4f4f4;
}
Update your HTML to use these utility classes where appropriate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<style>
/* Include utility classes and base styles here */
.p-20 {
padding: 20px;
}
.bg-light-gray {
background-color: #f4f4f4;
}
.bg-blue {
background-color: #007bff;
}
.text-white {
color: white;
}
.font-large {
font-size: 1.5rem;
}
/* Base styles */
.container {
display: flex;
}
.sidebar {
width: 250px;
background: #f4f4f4; /* Can be replaced with .bg-light-gray */
padding: 20px; /* Can be replaced with .p-20 */
}
.main-content {
flex: 1;
padding: 20px;
}
.menu-toggle {
display: none;
}
/* Behavioral CSS for breakpoints */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
display: none;
}
.menu-toggle {
display: block;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<aside class="sidebar p-20 bg-light-gray">Sidebar</aside>
<main class="main-content p-20">Main Content</main>
<button class="menu-toggle bg-blue text-white font-large p-10">☰</button>
</div>
</body>
</html>
Let us say we are going to use Flexbox layout. Here’s a quick look at how our UI will be set up to help you understand the different options and how they impact the generated HTML.
Basically, Condition 1 creates the first div that sets up the layout. After that, another div comes in to handle the details and styling for the content within that layout.
There are bunch of tools and platforms out there that help you test how responsive your site is, and many of them come with handy SDKs for automating the process. Once we have covered those:
1. BrowserStack
2. Sauce Labs
3. Percy
4. Applitools
5. CrossBrowserTesting
6. TestComplete
7. LambdaTest
You can log in to LambdaTest using your Google account. It is super easy to use, and you can quickly set up tests across a variety of devices to check how responsive your site is.
Real-time Testing and Real Devices: With the Try now option, you can log in and get trial session for at least 1 minute, allowing you to test with limited selection of devices. However, for access to real devices and more extensive testing options, you will need to upgrade your account.
For example: We tested the website www.flagtick.com on Safari 17 running macOS Sonoma with a screen resolution of 1440x900.