A Responsive Web Design
B Resilient Web Development
C Responsive Website Display
D Retina Web Design
Explanation: RWD stands for Responsive Web Design, an approach to web design that makes web pages render well on various screen sizes.
A Tim Berners-Lee
B Ethan Marcotte
C Steve Jobs
D Jeffrey Zeldman
Explanation: Ethan Marcotte coined the term 'Responsive Web Design' in his 2010 article on A List Apart.
A Fluid grids
B Flexible images
C Static layout
D Media queries
Explanation: Static layouts are NOT a component of RWD. The core components are fluid grids, flexible images, and media queries.
A A grid that uses pixel-based measurements
B A grid that uses percentage-based measurements
C A grid that uses fixed column widths
D A grid that only works on mobile devices
Explanation: A fluid grid uses relative units like percentages instead of fixed units like pixels, allowing the layout to adapt to the viewport size.
A To set the page title
B To control the layout on mobile browsers
C To define character encoding
D To link external stylesheets
Explanation: The viewport meta tag controls the layout and scaling on mobile browsers, ensuring proper display on different devices.
A width: 100%
B max-width: 100%
C height: auto
D object-fit: cover
Explanation: Using max-width: 100% on images ensures they scale down to fit their container but never scale up beyond their original size.
A A way to query database information
B A CSS technique to apply styles based on device characteristics
C A JavaScript framework
D A way to check internet speed
Explanation: Media queries are a CSS technique that allows you to apply styles based on device characteristics like screen width, height, orientation, and resolution.
A @media screen and (max-width: 768px)
B @media (screen: max-width 768px)
C @media screen max-width: 768px
D @media max-width: 768px screen
Explanation: The correct syntax is @media screen and (max-width: 768px) { ... } with the condition in parentheses.
A A point where the website breaks
B A specific screen width where the design changes
C A CSS debugging tool
D A JavaScript function
Explanation: Breakpoints are specific screen widths where the website's layout changes to accommodate different viewport sizes using media queries.
A Desktop-first only
B Mobile-first approach
C Both are equally recommended
D Neither approach is recommended
Explanation: The mobile-first approach is recommended in modern web design. It starts with a base style for mobile and progressively enhances for larger screens.
A A point where the website crashes
B A screen width value at which the layout changes
C A CSS property
D A JavaScript event
Explanation: Breakpoints are specific screen width values at which the website's layout changes to adapt to different viewport sizes.
A To make websites faster
B To make websites look the same on all devices
C To provide an optimal viewing experience across devices
D To reduce server costs
Explanation: The main goal of RWD is to provide an optimal viewing experience across a wide range of devices by eliminating the need for different designs for each device.
A px
B pt
C em or rem
D mm
Explanation: Relative units like em or rem are recommended for responsive typography because they scale relative to the root font size or parent element.
A Root em
B Relative em
C Regular em
D Responsive em
Explanation: REM stands for 'Root EM' and is relative to the root element (html) font size, making it ideal for responsive designs.
A CSS variables
B CSS Grid
C Picture element and srcset attribute
D CSS tables
Explanation: The picture element and srcset attribute allow you to serve different images based on screen size, resolution, and other factors.
A To set the image source folder
B To provide multiple image sources for different resolutions and sizes
C To style the image
D To set the image title
Explanation: The srcset attribute allows you to specify multiple image sources for different screen sizes or resolutions, improving performance and user experience.
A 480px
B 768px
C 1024px
D 1440px
Explanation: 480px is commonly used as the max-width breakpoint for mobile devices, though this can vary depending on the specific design and devices targeted.
A 480px
B 768px
C 1024px
D 1440px
Explanation: 768px is commonly used as the max-width breakpoint for tablets in responsive design.
A It fits the image into the frame
B It specifies how content should be resized to fit its container
C It creates a responsive image slider
D It adds a border to the image
Explanation: The object-fit property specifies how the content of a replaced element (like an image) should be resized to fit its container.
A jQuery
B React
C Bootstrap
D Vue.js
Explanation: Bootstrap is a popular CSS framework that includes a responsive grid system and components designed for responsive web design.