Media queries, mobile-first design, container queries, custom properties, transitions, keyframes and transforms.
40 cards · basic cards · AI-written, checked twice. Edit anything.
- What CSS syntax targets only screens 768px wide or larger?
Show answer
@media (min-width: 768px) { }- What CSS syntax applies styles only to screens narrower than 600px?
Show answer
@media (max-width: 599px) { }- How do you target print media in a CSS media query?
Show answer
@media print { }- What media feature detects whether the viewport is in landscape orientation?
Show answer
(orientation: landscape)- How do you combine two media conditions so both must be true?
Show answer
Use the 'and' keyword between conditions.- What media feature detects a touch screen with low-precision input?
Show answer
(pointer: coarse)- What is the core principle of mobile-first design?
Show answer
Build CSS for mobile devices first, then enhance with larger-screen styles.- In mobile-first CSS, where do you place base mobile styles?
Show answer
Outside any media queries, at the top level.- In mobile-first, what type of media query breakpoint do you use for larger screens?
Show answer
min-width breakpoints.- What file size or performance advantage comes from mobile-first design?
Show answer
Mobile users download only the CSS they need initially.- How do you declare an element as a container for container queries?
Show answer
container-type: size; or container-type: inline-size;- What container query unit represents 1% of the container's width?
Show answer
cqw- What container query unit represents 1% of the container's height?
Show answer
cqh- What CSS syntax applies styles based on a container's minimum width?
Show answer
@container (min-width: 400px) { }- Can container queries check a container's CSS property values instead of size?
Show answer
Yes, using @container style(--property-name: value) queries.
FlashKeepers