CSS Tutorial

CSS Media Queries

Last modified on: November 1, 2024

<h3>CSS Media Queries Overview</h3>
<p>CSS media queries enable you to apply styles conditionally based on device characteristics such as screen size, orientation, and resolution. They are foundational for responsive design, allowing you to optimize the layout and appearance of your website across various devices.</p>
<h3>Media Query Syntax</h3>
<p>The syntax for a media query includes the <code>@media</code> rule followed by a condition. If the condition is met, the styles within the query will be applied.</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>@media (condition) {
  /* CSS styles here */
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>Basic Example</h3>
<p>Here&rsquo;s how to change the background color of an element for screens narrower than 768px:</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>@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example, when the screen width is 768 pixels or less, the background color of the body will change to light blue.</p>
<h3>Common Media Query Types</h3>
<ol>
<li>
<p><strong>Width-based Queries</strong>:</p>
<ul>
<li><code>max-width</code>: Styles apply up to a specified maximum width.</li>
<li><code>min-width</code>: Styles apply starting from a specified minimum width.</li>
</ul>
</li>
<li>
<p><strong>Height-based Queries</strong>:</p>
<ul>
<li><code>max-height</code> and <code>min-height</code> work similarly to width-based queries, but target the viewport height.</li>
</ul>
</li>
<li>
<p><strong>Device Orientation</strong>:</p>
<ul>
<li><code>orientation: landscape</code>: Applies styles when the device is in landscape mode.</li>
<li><code>orientation: portrait</code>: Applies styles in portrait mode.</li>
</ul>
</li>
<li>
<p><strong>Resolution</strong>:</p>
<ul>
<li><code>min-resolution</code> and <code>max-resolution</code> target device pixel density (e.g., retina displays).</li>
</ul>
</li>
</ol>
<h3>Example: Breakpoints for Responsive Design</h3>
<p>Responsive design often uses breakpoints to adjust layouts across different screen sizes. Here&rsquo;s a sample structure:</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 (mobile-first styles) */
.container {
  width: 100%;
}

/* Tablet (from 768px) */
@media (min-width: 768px) {
  .container {
    width: 75%;
  }
}

/* Desktop (from 1024px) */
@media (min-width: 1024px) {
  .container {
    width: 50%;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<p>In this setup:</p>
<ul>
<li><strong>Mobile-first</strong> default applies to all screens below 768px.</li>
<li>At 768px and above, the container&rsquo;s width becomes 75%.</li>
<li>At 1024px and above, the container&rsquo;s width is further reduced to 50%.</li>
</ul>
<h3>Media Query Best Practices</h3>
<ol>
<li>
<p><strong>Mobile-First Approach</strong>: Start with styles for the smallest screen, then add media queries for larger screens. This approach often improves load times on mobile devices.</p>
</li>
<li>
<p><strong>Use Common Breakpoints</strong>: While there&rsquo;s no strict rule, using common breakpoints (like 576px, 768px, 1024px, and 1200px) helps maintain consistency across devices.</p>
</li>
<li>
<p><strong>Avoid Overlapping Styles</strong>: Organize your CSS so media queries do not unintentionally overlap, which can lead to inconsistent styles.</p>
</li>
<li>
<p><strong>Combine Conditions</strong>: Media queries can include multiple conditions using <code>and</code>:</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>@media (min-width: 768px) and (orientation: portrait) {
  /* Styles here apply only on portrait orientation with width 768px or greater */
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<h3>Advanced Media Query Examples</h3>
<p><strong>1. Retina Display Optimization</strong>:</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>@media (min-resolution: 192dpi) {
  .high-res-image {
    background-image: url('image@2x.png');
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>2. Dark Mode Toggle</strong>:</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>@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #f0f0f0;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>Summary</h3>
<p>CSS media queries are powerful tools for creating adaptable, responsive websites. By adjusting styles based on device properties, you can ensure a smooth, user-friendly experience across a wide range of devices. Mastering media queries will enhance the flexibility and usability of your designs, making them truly responsive and accessible.</p>

Web Technology View More