Why is mobile-first design recommended and how do you implement a breakpoint at 768px?

Why is mobile-first design recommended and how do you implement a breakpoint at 768px?

• A. It starts with small screens and scales up; use @media (min-width: 768px) { ... } to apply styles for larger viewports.
• B. It starts with large screens and scales down; use @media (max-width: 768px) { ... }
• C. It ignores breakpoints and uses fluid units only
• D. It uses JavaScript to adjust layout; no CSS media queries

Answer: (A)

Mobile-first design starts with styles for the smallest screens and then adds enhancements as the viewport grows. This keeps core content and interactions simple on phones and makes it easier to scale up for tablets and desktops without rewriting everything. To implement a breakpoint at 768px, begin with your mobile styles as the default, then use a media query that applies only when the viewport is at least 768px wide. The min-width approach is key here because styles cascade upward: once the viewport crosses 768px, the larger-viewport rules kick in. Example: - Mobile base .container { padding: 1rem; display: block; } - Breakpoint for larger screens @media (min-width: 768px) { .container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } Why this is best: it aligns with progressive enhancement—everyone gets a usable mobile layout, and enhancements progressively improve the layout on larger screens. It also tends to be simpler to maintain and often performs better on mobile devices with limited resources. Why the other options don’t fit: starting with large screens contradicts mobile-first practice; using a max-width breakpoint targets smaller screens instead of enlarging layouts; ignoring breakpoints eliminates responsive behavior; and relying on JavaScript for layout instead of CSS media queries adds unnecessary complexity.

Mobile-first design starts with styles for the smallest screens and then adds enhancements as the viewport grows. This keeps core content and interactions simple on phones and makes it easier to scale up for tablets and desktops without rewriting everything.

To implement a breakpoint at 768px, begin with your mobile styles as the default, then use a media query that applies only when the viewport is at least 768px wide. The min-width approach is key here because styles cascade upward: once the viewport crosses 768px, the larger-viewport rules kick in.

Example:

• Mobile base

.container { padding: 1rem; display: block; }

• Breakpoint for larger screens

@media (min-width: 768px) {

.container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

}

Why this is best: it aligns with progressive enhancement—everyone gets a usable mobile layout, and enhancements progressively improve the layout on larger screens. It also tends to be simpler to maintain and often performs better on mobile devices with limited resources.

Why the other options don’t fit: starting with large screens contradicts mobile-first practice; using a max-width breakpoint targets smaller screens instead of enlarging layouts; ignoring breakpoints eliminates responsive behavior; and relying on JavaScript for layout instead of CSS media queries adds unnecessary complexity.