NEW
Font size
WorksheetsResponsive Web Design Worksheet
Total questions: 20
Worksheet time: 15mins
What is the main goal of responsive web design?
To create websites only for desktop users
To create multiple versions of a site for each device
To allow websites to adapt to different devices and screen sizes
To improve website animations
Which of the following is a key benefit of responsive web design?
Slower website loading time
Inconsistent user experience
Enhanced user experience
Increased development costs
Why is responsive design important for SEO?
Search engines prefer text-only websites
It improves mobile-friendliness, which boosts rankings
It increases server response time
It hides website content from crawlers
What is the purpose of the viewport meta tag in responsive web design?
To define background colors
To control how a webpage scales and fits on devices
To load external CSS files
To disable zooming on mobile devices
Which of the following is the correct syntax for a media query?
@media (min: width 768px)
@media screen and (min-width: 768px)
@media (screen width 768px)
@media min-width=768px
What media feature is most commonly used in responsive design?
orientation
height
color
width
What does the term “fluid grid” mean in responsive design?
A. A grid that uses fixed pixel values
B. A grid that uses percentage-based widths to adapt to screen size
C. A grid that uses only 12 columns
D. A static layout grid
Which CSS property ensures images resize proportionally within their container?
width: auto;
max-width: 100%;
overflow: hidden;
display: block;
What does max-width: 767px in a media query target?
Large desktop screens
Small devices like smartphones
Medium-sized tablets
Projector screens
What is the function of min-width in a media query?
It hides content below a specific width
It applies styles to devices larger than a specified width
It scales text automatically
It adjusts image resolution
What happens when no viewport meta tag is included in a webpage?
The website loads faster
The layout appears zoomed out or improperly scaled on mobile devices
The design becomes more responsive automatically
It improves mobile readability
Which unit type is best for creating fluid layouts?
px
em
%
pt
What happens to elements inside a container when using a flexible layout with float and percentages?
They overlap
They adjust width relative to the container
They remain fixed
They disappear
The effect of hiding a sidebar with display: none; in a small-screen media query is:
The sidebar is completely removed from the layout and not visible.
The sidebar becomes transparent but still takes up space.
The sidebar is minimized to a small icon.
The sidebar is hidden but still takes up space in the layout.
What CSS rule should you use to stack columns vertically on small screens?
float: right;
width: 100%; and float: none;
display: inline;
position: absolute;
Why should designers test responsive websites across different devices?
To ensure identical behavior in all browsers
To verify consistent responsiveness and usability
To check if JavaScript is working
To debug back-end logic
What is the main difference between adaptive and responsive design?
Adaptive uses fixed breakpoints; responsive uses fluid grids
Responsive is for print media; adaptive is for screens
Adaptive adjusts automatically without CSS
Responsive only works on mobile devices
What will happen if a media query condition is not met?
The browser crashes
The CSS rules inside it are ignored
The layout breaks
The styles still apply partially
The principle that ensures content resizes proportionally on all screens is called:
Responsiveness
Accessibility
Usability
Interactivity
Which of the following uses relative units to maintain proportionate resizing across different screen sizes?
Fixed layouts
Fluid grids
Static positioning
Absolute dimensions
