W3Reference.com
Toggle Menu
Home
Online Rust Compiler
Tutorials
Python Tutorial
Java Tutorial
Rust Tutorial
TypeScript Tutorial
ReactJS Tutorial
HTML & CSS Basics
Docker Containers Guide
Kubernetes Tutorial
Software Design Patterns
Blog
All Posts
Responsive Web Design with CSS
Assess your ability to build layouts using Flexbox,Grid,and media queries.
1. What is the primary purpose of the viewport meta tag in responsive design?
To set the default font size for mobile devices
To control the layout viewport on mobile browsers
To enable CSS Grid layout
To link external CSS files
2. Which CSS units are considered relative and suitable for responsive design? (Select all that apply)
px
em
rem
vh
pt
3. Media queries can target device orientation (e.g., portrait or landscape).
True
False
4. What does the acronym RWD stand for in web development?
5. Which is the correct syntax for a media query that applies styles when the viewport width is at least 768px?
@media min-width: 768px { ... }
@media (min-width: 768px) { ... }
@media screen and 768px { ... }
@media (width >= 768) { ... }
6. Which CSS Flexbox properties affect the alignment of items along the main axis? (Select all that apply)
justify-content
align-items
flex-direction
align-content
text-align
7. What CSS Grid property creates responsive columns that automatically adjust based on viewport size?
grid-gap
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
grid-auto-flow
grid-template-rows: auto
8. Using fixed pixel (px) widths for container elements is recommended for responsive web design.
True
False
9. What CSS property is commonly used to make images responsive by preventing them from overflowing their container?
10. Which media query features can target viewport dimensions? (Select all that apply)
min-width
max-device-width
color
aspect-ratio
font-size
11. Which CSS unit is equal to 1% of the viewport's height?
vw
vh
rem
em
12. CSS Flexbox is primarily a one-dimensional layout system, focusing on either rows or columns.
True
False
13. What is the abbreviation for the CSS unit that scales relative to the viewport's width?
14. Which of these are best practices for responsive images? (Select all that apply)
Using srcset to provide multiple image sources
Adding the sizes attribute to define image dimensions
Setting width: 100% and height: auto
Using fixed pixel dimensions for all images
Ignoring image file formats
15. Which CSS property defines the minimum viewport width at which a media query takes effect?
min-device-width
min-width
max-width
width
Reset
Answered 0 of 0 — 0 correct