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.
I. Responsive Website Design with Media Queries
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">
II. Responsive Design Using CSS Breakpoints
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:
- 0 - 767px: Mobile devices (small screens, typically smartphones)
- 768px - 1023px: Tablets (medium screens)
- 1024px - 1199px: Small desktops or large tablets
- 1200px - 1439px: Large desktops
- 1440px and above: Extra-large desktops or widescreen monitors
III. Optimizing Breakpoints Using Top CSS Frameworks
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.
- Bootstrap
- Materialize CSS
- Ant Design
- Semantic UI/Fomantic UI
- Bulma
- Foundation
- UIKit
- Tachyons
- Tailwind CSS
- PureCSS
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:
- On smaller screens (like your phone), each column will take up half the width of the container, so you will see two columns per row.
- On medium screens (like tablets), each column will take up one-third of the width, giving you three columns per row.
- On larger screens (like desktops), each column will take up one-quarter of the width, allowing for four columns per row.
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:
- `grid`: Sets the container to use a grid layout.
- `grid-cols-1`: Defines the grid with one column by default (on the smallest screens).
- `sm:grid-cols-2`: Changes the grid to two columns on small screens (≥640px wide).
- `md:grid-cols-3`: Changes the grid to three columns on medium screens (≥768px wide).
- `lg:grid-cols-4`: Changes the grid to four columns on large screens (≥1024px wide).
- `gap-4`: Adds spacing between grid items.
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.
IV. Best Practices for Fluid Responsive CSS Layouts
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.
V. Testing Responsive Layouts Across Breakpoints
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
- Overview: Provides cross-browser and responsive testing on real devices and emulators.
- Features: Real device cloud, automated testing, responsive design testing, and visual testing.
- SDK: BrowserStack has SDKs for various languages and frameworks, including JavaScript, Python, and Java.
2. Sauce Labs
- Overview: Offers cross-browser and mobile testing on real devices and virtual machines.
- Features: Automated testing, responsive design validation, and real-time testing.
- SDK: Sauce Labs provides SDKs for Selenium and Appium, which are useful for automated responsive testing.
3. Percy
- Overview: Focuses on visual testing and can be integrated with various CI/CD pipelines.
- Features: Visual regression testing, responsive design testing, and snapshot comparisons.
- SDK: Percy integrates with many frameworks and provides libraries for JavaScript, Python, and Ruby.
4. Applitools
- Overview: Specializes in visual AI testing and can handle responsive design testing.
- Features: Visual AI testing, responsive layout validation, and cross-browser testing.
- SDK: Applitools provides SDKs for several languages and frameworks, including JavaScript, Java, and Python.
5. CrossBrowserTesting
- Overview: Provides cross-browser and responsive design testing on real devices and browsers.
- Features: Real device testing, automated screenshot comparisons, and responsive design validation.
- SDK: CrossBrowserTesting integrates with various testing frameworks and CI/CD tools.
6. TestComplete
- Overview: A powerful tool for automated UI testing that supports responsive design testing.
- Features: Automated UI testing, cross-browser testing, and visual testing.
- SDK: TestComplete supports scripting languages like JavaScript, Python, and VBScript for automated tests.
7. LambdaTest
- Overview: As mentioned, it supports responsive design testing, cross-browser testing, and real-time device testing.
- Features: Real-time browser testing, automated screenshots, and responsive design validation.
- SDK: LambdaTest provides SDKs for various languages and frameworks, including JavaScript and Python.
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.
When testing responsiveness, you have several options: using browser tool's emulator for responsive dimensions, installing software to simulate real device, or testing on actual device. Real devices typically provide the most accurate results compared to other methods.
VI. Conclusion
In "Best Practices & Examples: CSS Breakpoints for Responsive Design," we cover how to use breakpoints and media queries to ensure your website looks great on any device. You will learn practical tips and see examples for optimizing layouts across different screen sizes.
Have feedback or questions? We'd love to hear from you!
VII. Video
