WorksheetsResponsive - Day 8
Total questions: 31
Worksheet time: 6mins
Did you enjoy your HTML, CSS, JS, PHP classes?
You used a grid-based layout and resize-able images, which is another RWD technique that you can use in responsive design?
It uses the @media rule to include a block of CSS properties only if a certain condition is true.?
False
True
Which of the following ways is correct to Set the media query ?
@media only screen and (min-width: 768px){}
@media on (min-width: 768px){}
None of the above
We can add a breakpoint where certain parts of the design will behave differently on ______________.?
The Text is shown normal.
each side of the breakpoint.
None of the above
Media queries can also be used to change layout of a page depending on the ______?
orientation of the browser.
Size
None of the above
Which of the following is the correct form to create a col with media query?
.col-1 {width: 8.33%;}
flex-wrap: no-wrap;
None of the above
Which of the following bootstrap style is used to add standard links to .navbar?
- .navbar-link
- .link
- .form-link
None of the above.
Select the most appropriate CSS media query statement to change the #wrapper selector's width value to 90% on screen devices not wider than 1024px.
@media only screen and (min-width: 1024px) { #wrapper { width: 90%; } }
@media only screen and (max-width: 1024px) { #wrapper { width: 90%; } }
@media all and (min-width: 1024px) { #wrapper { width: 90%; } }
@media print and (max-width: 1024px) { #wrapper { width: 90%; } }
Which of the following are flex-direction property values? (Choose all that apply.)
auto
row-reverse
column
start
grid-area property controls
The size of the whole grid
the size of a grid cell
grid area row start, column start, row end, column end
the size of the table
What is the attribute used to give curved borders?
(a)
How do you target devices with a specific screen width using media queries?
By using the 'min-width' and 'max-width' properties in CSS media queries.
By using the 'min-device-width' and 'max-device-width' properties in CSS media queries.
By using the 'min-resolution' and 'max-resolution' properties in CSS media queries.
By using the 'min-height' and 'max-height' properties in CSS media queries.
How do you apply different styles to different screen sizes using media queries?
By using the @media query in JavaScript
By using the
By using the @media rule in CSS
By using the !important rule in CSS
What is the default media type if not specified in a media query?
none
all
default
any
@media screen (max-width: 600px) {...}
@media only screen and (max-width: 600px) {...}
$media screen and (max-width: 600px) {...}
<script type="text/javascript">
x=4+"4";
document.write(x);
</script>
Output------?
44
8
4
Error output
What is the most common feature used in media queries?
max-width
max-resolution
min-height
aspect-ratio
What is the order in which styles are typically defined in a CSS document with media queries?
Desktop first
Mobile first
Smartphone first
Tablet first
Which type of displays may be detected using the resolution value in media queries?
High-resolution displays
Touchscreen displays
Low-resolution displays
Monochrome displays
What happens if multiple media queries target the same element?
They cancel each other out
The first one is always applied
The last one is always applied
They are applied randomly
What is the purpose of using media queries in responsive web design?
To add interactive games to websites
To customize the appearance of websites for multiple devices
To make websites load faster
To increase website security
_____ are used to associate a style sheet or style rule with a specific device or list of device features.
Flexible layouts
Responsive images
Viewports
Media queries
Identify the media rule that must be included in a Cascading Style Sheet (CSS) file so that media queries can be used to associate specific style rules with specific devices.
#media
devices
{
style rules
}
&media
devices
{
style rules
}
@media
devices
{
style rules
}
*media
devices
{
style rules
}
Identify the media query that applies style rules only to screens that are at least 300 pixels wide.
@media screen and (min-width: 300px) {
style rules
}
media screen and (@min-width: 300px) {
style rules
}
media screen and (least-width: 300px) {
style rules
}
@media screen and (@minwidth: 300px) {
style rules
}
Web pages are seen within a window called the _____.
wireframe
navigator
prototype
viewport
Mobile Screen Size?
480px
640px
320px
500px
Tablet Screen Size?
480px
640px
720px
900px
Desktop Screen Size?
1024px
1440px
720px
900px
