curriculum/challenges/english/blocks/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
What are breakpoints in responsive web design?
Specific points in a design where floats overlap with other elements on the page.
Specific points used to set the columns and rows for a grid or flex layout.
Specific points used to determine how a tabular layout will behave on the page.
Specific points in a design where the layout and content adjust to accommodate different screen sizes.
Which of the following is NOT a breakpoint used for smaller devices?
600px
480px
320px
960px
What is the main purpose of using media queries in responsive web design?
To change the color scheme of the page for Safari browsers.
To create animations for table layouts.
To adjust margins and padding for layouts using CSS flexbox.
To apply different styles based on the screen size or device type.
Which media feature in a media query checks the width of the browser window?
set-width
accept-width
allow-width
min-width
What will the following code do?
@media screen and (min-width: 768px) {
/* Styles go here */
}
This will ignore styles for screens that are 768px wide.
This will apply styles for screens that are only 768px wide.
This will apply styles for screens that are smaller than 768px.
This will apply styles for screens that are 768px and wider.
What does mobile-first design emphasize?
Designing for smaller devices only and ignoring the others.
Designing for mobile devices built by Apple only.
Designing for smaller Android screens first and ignoring Apple devices.
Designing for smaller screens first and scaling up for larger devices.
Which media query will apply styles when the device's width is between 600px and 1200px?
@media screen and (max-width: 1200px)
@media screen and (min-width: 600px)
@media screen and (width: 800px)
@media screen and (min-width: 600px) and (max-width: 1200px)
Which of the following is NOT a valid media type?
all
print
screen
poster
Which of the following media types is intended for paged material and documents viewed on a screen in print preview mode?
aspect-ratio
flex
screen
print
What does the aspect-ratio do in media queries?
It describes the ratio between flex properties in a flex layout.
It describes the ratio between the x and y axis for grid containers.
It describes the ratio between rows and columns for table layouts.
It describes the ratio between the width and height of the viewport.
Which of the following is used to indicate whether the device is in landscape or portrait orientation?
apply-orientation
set-orientation
oriente
orientation
Which of the following is commonly used to target desktop screens and larger?
@media screen and (min-width: 140000px) {
/* Styles go here */
}
@media screen and (min-width: 140px) {
/* Styles go here */
}
@media screen and (min-width: 14000px) {
/* Styles go here */
}
@media screen and (min-width: 1400px) {
/* Styles go here */
}
Which of the following is used to detect if the user has requested a light or dark color theme?
allow-colors-scheme
apply-color-scheme
set-colors-scheme
prefers-color-scheme
Which of the following is used to test whether the primary input mechanism can hover over elements?
@media (set: hover) {
/* Styles for devices that support hover */
}
@media (apply: hover) {
/* Styles for devices that support hover */
}
@media (hover: apply) {
/* Styles for devices that support hover */
}
@media (hover: hover) {
/* Styles for devices that support hover */
}
Which of the following is NOT a type of logical operator you can use with media queries?
only
not
and
accept
Which of the following breakpoints is commonly used for tablets in responsive web design?
480px
1920px
2560px
768px
Which of the following is the correct way to apply the aspect-ratio in a media query?
@media screen and (aspect-ratio: 16-9) {
/* Styles for screens with a 16:9 aspect ratio */
}
@media screen and (aspect-ratio: 16=9) {
/* Styles for screens with a 16:9 aspect ratio */
}
@media screen and (aspect-ratio: 16:9) {
/* Styles for screens with a 16:9 aspect ratio */
}
@media screen and (aspect-ratio: 16/9) {
/* Styles for screens with a 16:9 aspect ratio */
}
Which CSS property is used to create a layout that adjusts based on screen size without media queries?
float
display: block;
width: 100%;
flex
Which of the following can be used to target landscape screens 768px and larger?
@media screen and (min-width: 768px) and (landscape: orientation) {
/* Styles go here */
}
@media screen and (max-width: 768px) and (orientation: landscape) {
/* Styles go here */
}
@media screen and (min-width: 768px) and (landscape: set) {
/* Styles go here */
}
@media screen and (min-width: 768px) and (orientation: landscape) {
/* Styles go here */
}
What is the default media type if no media type is specified?
screen
mobile
print
all
Which CSS unit is commonly used in responsive design to create fluid layouts?
px
em
rem
%
What is the primary purpose of using media queries in responsive web design?
To apply different styles based on user input
To make the website load faster
To change the website’s color scheme automatically
To adjust the layout and design based on screen size
Which CSS width value causes an element to scale proportionally with the width of its parent container, making it suitable for responsive design?
auto
100vh
fit-content
100%
Which of the following is an example of a media feature that can be used in a media query?
background-color
font-size
text-align
min-width
What does the @media screen and (max-width: 768px) media query apply to?
It applies styles to screens larger than 768px wide.
It applies styles to all screens, regardless of size.
It applies styles to screens with a resolution greater than 768dpi.
It applies styles to screens smaller than 768px wide.
Which of the following media query features targets devices with a screen resolution of at least 300dpi?
@media screen and (min-width: 300dpi)
@media screen and (resolution: 300dpi)
@media screen and (min-res: 300dpi)
@media screen and (min-resolution: 300dpi)
Which of the following media features would you use to apply styles only when a device does not support hover interactions?
@media (hover: hover)
@media (hover: auto)
@media (no-hover: false)
@media (hover: none)
Which of the following is a valid way to target devices with a portrait orientation using a media query?
@media screen and (orientation: landscape) { ... }
@media (portrait: orientation) { ... }
@media screen and (min-orientation: portrait) { ... }
@media screen and (orientation: portrait) { ... }
Which media query feature is used to apply styles based on the resolution of the device?
@media (resolution: high) { ... }
@media screen and (resolution: 300dpi) { ... }
@media (min-resolution: 150) { ... }
@media (min-resolution: 300dpi) { ... }
What is the purpose of the @media (hover: hover) query in CSS?
It applies styles only on touch devices.
It changes styles based on device orientation.
It detects if the device uses a touchscreen.
It checks if a device supports mouse hover.
Which media feature allows you to apply styles only on high pixel density screens like Retina displays?
device-type
aspect-ratio
min-width
min-resolution
Which keyword can be used in media queries to combine multiple conditions?
if
then
combine
and
Which CSS technique is commonly used with media queries to apply styles only under specific conditions?
Using inline styles for all elements
Using JavaScript to detect screen size and apply classes
Linking to different HTML files for mobile and desktop
Combining media features using logical operators like and in media queries
Which CSS technique helps ensure images scale proportionally on different screen sizes?
Using fixed pixel widths for images
Setting images as background elements
Applying inline styles with exact dimensions
Setting the image width to a percentage like width: 100%
What is the purpose of the @media screen and (min-resolution: 300dpi) query?
To apply styles for screens with a low pixel density.
To apply styles based on the screen’s width.
To apply styles based on the device's resolution in pixels.
To apply styles for screens with a high pixel density.
Which of the following is true about the mobile-first approach in responsive design?
It focuses on designing for large desktop screens first and then scaling down.
It designs primarily for tablet screens before scaling down.
It only targets smartphones and ignores tablets or desktops.
It focuses on designing for mobile devices first, then scaling up for larger screens.
Which media query feature is used to detect the screen orientation (landscape or portrait)?
aspect-ratio
device-width
max-width
orientation
What does the prefers-color-scheme media feature detect?
The type of device used for display
The screen resolution
The user's preferred font size
Whether the user prefers a light or dark theme
What does the orientation media feature detect?
The width of the screen
The resolution of the display
The type of device (tablet, phone, etc.)
Whether the device is in landscape or portrait mode
What is the correct syntax to apply styles for devices with at least 2x pixel density?
@media (resolution: 2x)
@media screen and (pixel-ratio: 2)
@media (dpi: 300)
@media screen and (min-resolution: 192dpi)