Mission 7: Multi-Platform Broadcast
An urgent fleet-wide alert must be formatted to display correctly on three different screen sizes simultaneously: a capital ship's main viewscreen (large), a standard ship console (tablet), and a field agent's wrist-communicator (mobile).
Mission Objective
Step 1 / 1
System Briefing: The Universal Translator
Technician, our operatives use devices of all sizes, from capital ship viewscreens to wrist-communicators. An interface that works on one may be unusable on another. Media Queries are the CSS protocol's universal translator, allowing a single interface to adapt its layout based on the characteristics of the display device, such as its width, height, or orientation.
The @media Rule
This is the core of responsive design. The @media rule is used to apply a block of CSS properties only if a certain condition is true. This condition is known as a media feature.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media: The at-rule that starts the query.screen: A media type. Others includeprintandall.screenis most common for UIs.(max-width: 600px): A media feature. This is the condition. The styles inside will only apply if the viewport width is 600 pixels or less.
Mobile-First Design
A common best practice is "mobile-first". This means you write your default CSS for the smallest mobile screens first. Then, you use media queries with min-width to add or modify styles for larger screens (tablets, desktops). This approach often leads to cleaner, more efficient code.
/* Base styles for mobile */
.container { display: block; }
/* Tablet styles */
@media (min-width: 768px) {
.container { display: flex; }
}
/* Desktop styles */
@media (min-width: 1200px) {
.container { justify-content: space-between; }
}