CSS Tutorial

CSS MQ Examples

Last modified on: November 1, 2024

<p>Here are some practical examples of CSS media queries (MQ) to help you understand how to implement them for responsive design.</p>
<h3>1. Basic Media Query</h3>
<p>This example changes the font size for small screens:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Default styles */
body {
  font-size: 16px;
}

/* Media query for devices with a maximum width of 600px */
@media (max-width: 600px) {
  body {
    font-size: 14px; /* Smaller font size for smaller screens */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Responsive Layouts</h3>
<p>Adjusting a grid layout based on screen size:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Default styles (mobile-first) */
.container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
}

/* Media query for tablets */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Arrange items in a row for wider screens */
  }
}

/* Media query for desktops */
@media (min-width: 1024px) {
  .container {
    flex-direction: row; /* Keep items in a row */
    justify-content: space-between; /* Add spacing between items */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Image Resizing</h3>
<p>Making images responsive based on the screen size:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>img {
  width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
}

/* For large screens */
@media (min-width: 1200px) {
  img {
    width: 80%; /* Increase image size on larger screens */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Hiding Elements</h3>
<p>Hiding elements on small screens:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.sidebar {
  display: block; /* Show sidebar by default */
}

/* Hide sidebar on screens smaller than 768px */
@media (max-width: 768px) {
  .sidebar {
    display: none; /* Hide sidebar on small screens */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>5. Different Styles for Portrait and Landscape Orientation</h3>
<p>Using media queries to change styles based on orientation:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Styles for portrait orientation */
@media (orientation: portrait) {
  .container {
    background-color: lightblue; /* Light blue background for portrait */
  }
}

/* Styles for landscape orientation */
@media (orientation: landscape) {
  .container {
    background-color: lightcoral; /* Light coral background for landscape */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>6. Adjusting Navigation</h3>
<p>Change the navigation layout based on screen size:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.navbar {
  display: flex;
  flex-direction: column; /* Stack nav items vertically */
}

/* For wider screens, display items in a row */
@media (min-width: 768px) {
  .navbar {
    flex-direction: row; /* Arrange items horizontally */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>7. Using Multiple Conditions</h3>
<p>Combining multiple media query conditions:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Apply styles for screens that are 768px and wider in portrait mode */
@media (min-width: 768px) and (orientation: portrait) {
  body {
    background-color: lightgreen; /* Light green for portrait */
  }
}

/* Apply styles for screens that are 768px and wider in landscape mode */
@media (min-width: 768px) and (orientation: landscape) {
  body {
    background-color: lightyellow; /* Light yellow for landscape */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>8. Responsive Typography</h3>
<p>Adjusting font sizes based on the screen size:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>h1 {
  font-size: 2em; /* Default font size */
}

/* For screens larger than 600px */
@media (min-width: 600px) {
  h1 {
    font-size: 2.5em; /* Increase font size */
  }
}

/* For screens larger than 1200px */
@media (min-width: 1200px) {
  h1 {
    font-size: 3em; /* Further increase font size */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>9. Customizing Button Styles</h3>
<p>Changing button styles based on screen size:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.button {
  padding: 10px 20px;
}

/* For mobile devices */
@media (max-width: 600px) {
  .button {
    padding: 8px 16px; /* Smaller padding on mobile */
  }
}

/* For larger devices */
@media (min-width: 600px) and (max-width: 1200px) {
  .button {
    padding: 12px 24px; /* Standard padding for tablets */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>10. Dark Mode Support</h3>
<p>Using media queries to support dark mode based on user preferences:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>body {
  background-color: white; /* Light mode background */
  color: black; /* Light mode text color */
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black; /* Dark mode background */
    color: white; /* Dark mode text color */
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>Summary</h3>
<p>These examples demonstrate how to utilize CSS media queries to create responsive designs that adapt to various screen sizes, orientations, and user preferences. By incorporating media queries effectively, you can ensure a consistent and user-friendly experience across all devices.</p>

Web Technology View More