HTML and CSS project tutorial covering web development fundamentals. Learn to build interactive and responsive web pages.
A media query uses the @media rule followed by a condition and a block of CSS: @media (max-width: 768px) { ... }. The CSS inside only applies when the condition is true. You can combine multiple conditions with and, or (comma), and not.
Common features to query: width/height (viewport dimensions), orientation (portrait vs landscape), resolution (DPR for retina displays), prefers-color-scheme (dark mode detection), and prefers-reduced-motion (accessibility preferences).
Mobile-first design starts with styles for small screens (the base CSS) and adds min-width queries to enhance for larger screens: @media (min-width: 768px) { ... }. This approach is preferred because it loads less CSS on mobile devices and aligns with mobile internet usage trends.
Desktop-first starts with desktop styles and uses max-width queries to override for smaller screens. Both approaches work, but mobile-first generally produces cleaner code with fewer overrides. Choose one approach and stay consistent throughout your project.
While breakpoints should be based on your content, common references are: 480px (small phones), 768px (tablets/ large phones), 1024px (small laptops/ landscape tablets), 1280px (desktop), and 1440px+ (large screens).
Rather than targeting specific devices, let your content dictate breakpoints. Resize your browser and add a breakpoint when the layout starts looking cramped or stretched. This content-first approach creates more resilient designs that work on future devices with different dimensions.
Use relative units like rem, em, vw, and % instead of fixed pixels. Combine with the clamp() function for fluid typography: font-size: clamp(1rem, 2.5vw, 1.5rem). This makes text scale smoothly between minimum and maximum sizes without media queries.
Adjust spacing and margins at breakpoints. On mobile, reduce padding and use stacked layouts. On desktop, increase whitespace and use multi-column arrangements. The gap property in CSS Grid and Flexbox makes spacing adjustments across breakpoints simple.
The most common responsive navigation pattern is the hamburger menu: show a full horizontal nav on desktop and collapse to a toggle button on mobile. Use a media query to hide the desktop nav and show a mobile menu button at your tablet breakpoint.
Alternative patterns: priority+ nav (shows as many items as fit, hides extras in a dropdown), footer anchor nav (moves nav below content on mobile), and select/dropdown nav (converts links to a select element on very small screens). Choose based on the number of navigation items and your site's content structure.
Use max-width: 100% on images to prevent overflow: img { max-width: 100%; height: auto; }. For art direction (different crops on different screens), use the picture element with multiple source elements. For resolution switching, use the srcset attribute with different image sizes.
Videos and iframes need similar treatment: video { max-width: 100%; height: auto; }. For responsive iframes (like YouTube embeds), wrap them in a container with position: relative and a percentage padding trick to maintain aspect ratio.
Chrome DevTools Device Mode lets you test any screen size. Resize your browser window gradually to find all breakpoints. Test on real devices when possible — emulators don't perfectly replicate touch interactions, screen quality, or performance.
Use @media (hover: hover) to detect touch vs mouse devices. Touch devices don't have hover states, so design interactions that work with taps. The pointer: coarse query detects touch primary input, useful for increasing tap target sizes on mobile.