ArtOfCode.org
Toggle Menu
Home
Online Rust Compiler
Tutorials
Algorithms 101
Html Css Tutorial
Javascript Tutorial
Blog
All Posts
Responsive Web Design
Apply media queries and fluid units.
1. Which CSS unit is relative to the viewport width, making it useful for responsive layouts?
px
em
rem
vw
2. Select all practices that help create responsive images.
Using `max-width: 100%` on images
Setting fixed pixel heights for images
Using the `srcset` attribute
Using media queries to serve different image sizes
3. A responsive website uses a single HTML file that adapts to different devices, rather than separate mobile and desktop sites.
True
False
4. What term describes a layout that adjusts its elements' size and position based on the available screen space?
5. What is the recommended value for the `width` property in the viewport meta tag to ensure proper mobile scaling?
device-width
100%
auto
320px
6. Which of these are common breakpoints used in responsive design?
320px (mobile)
768px (tablet)
1024px (laptop)
2000px (ultrawide monitor)
7. Using `fixed` positioning for navigation bars is always recommended in responsive design.
True
False
8. What CSS layout model allows elements to dynamically grow and shrink to fill available space in a container?
9. In media queries, what does the `min-width` condition specify?
Styles apply when the viewport is smaller than the value
Styles apply when the viewport is larger than or equal to the value
Styles apply only to print media
Styles apply to all devices regardless of size
10. What is the name of the meta tag that controls how a webpage scales on mobile devices (case-insensitive)?
Reset
Answered 0 of 0 — 0 correct