MCQs Of Class 18: Responsive Design - Media Queries
1. What is the purpose of the @media query in CSS?
- a) To apply styles to all screens
- b) To apply styles based on screen width or device characteristics
- c) To apply styles to images only
- d) To apply styles only to text
Answer: b) To apply styles based on screen width or device characteristics
Explanation: The @media query in CSS is used to apply different styles based on the device's characteristics, such as screen width or resolution.
2. Which of the following properties makes a header sticky on scroll?
- a) position: relative;
- b) position: absolute;
- c) position: sticky;
- d) position: fixed;
Answer: c) position: sticky;
Explanation: The position: sticky property makes an element stick to its position when scrolling past it.
3. How do you ensure a webpage is responsive for mobile devices?
- a) Use absolute positioning for all elements
- b) Set the viewport meta tag
- c) Set display: none for mobile devices
- d) Avoid using media queries
Answer: b) Set the viewport meta tag
Explanation: The viewport meta tag helps ensure the webpage is responsive on different devices by controlling the layout scaling.
4. Which property allows an image to resize according to the screen size?
- a) width: 100%;
- b) height: auto;
- c) width: auto;
- d) width: 100px;
Answer: a) width: 100%;
Explanation: Setting width: 100% ensures that the image resizes dynamically based on the screen size, maintaining its aspect ratio.
5. What does grid-template-columns: repeat(4, 1fr); do in a grid layout?
- a) Creates a grid with 4 equal-width columns
- b) Creates 4 fixed-width columns
- c) Creates 1 column of variable width
- d) Defines the grid rows
Answer: a) Creates a grid with 4 equal-width columns
Explanation: The repeat(4, 1fr) creates a grid with 4 equal-width columns, where 1fr represents one fraction of the available space.
6. How do you hide an element on mobile devices using media queries?
- a) display: none; inside a media query
- b) visibility: hidden; inside a media query
- c) width: 0px; inside a media query
- d) opacity: 0; inside a media query
Answer: a) display: none; inside a media query
Explanation: The display: none; property inside a media query hides elements on devices that meet the query's conditions.
7. What is the default number of columns in a CSS grid layout?
- a) 1
- b) 2
- c) 3
- d) It is not defined by default.
Answer: d) It is not defined by default.
Explanation: By default, CSS grids have no columns defined, and the layout will flow based on the content unless specified.
8. In a media query, what does max-width: 600px target?
- a) Devices with a screen width larger than 600px
- b) Devices with a screen width smaller than 600px
- c) Devices with a height larger than 600px
- d) Devices with a height smaller than 600px
Answer: b) Devices with a screen width smaller than 600px
Explanation: max-width: 600px applies styles for screens with a width of 600px or smaller.
9. Which of the following properties allows for equal spacing between grid items?
- a) gap
- b) padding
- c) margin
- d) border
Answer: a) gap
Explanation: The gap property in CSS Grid defines the space between grid items.
10. What does position: sticky; top: 0; do?
- a) Keeps the element fixed at the top
- b) Keeps the element sticky at the top when scrolling
- c) Keeps the element at the bottom of the page
- d) Makes the element float above the page
Answer: b) Keeps the element sticky at the top when scrolling
Explanation: position: sticky; top: 0; makes the element stick to the top of the screen when scrolling past its original position.
11. What is the purpose of height: auto; for an image?
- a) To make the image fill the container height
- b) To allow the height to adjust automatically based on the image's aspect ratio
- c) To make the image width 100%
- d) To fix the image height
Answer: b) To allow the height to adjust automatically based on the image's aspect ratio
Explanation: height: auto; maintains the image's aspect ratio as the width changes.
12. Which of the following properties is used to create a responsive grid layout?
- a) float
- b) flexbox
- c) grid-template-columns
- d) position
Answer: c) grid-template-columns
Explanation: The grid-template-columns property defines the number and size of columns in a grid layout.
13. In a responsive design, what does width: 100% do for a container?
- a) Ensures the container takes up the full width of its parent element
- b) Fixes the container width to 100px
- c) Makes the container hidden on smaller screens
- d) Ensures the container always stays centered
Answer: a) Ensures the container takes up the full width of its parent element
Explanation: width: 100% makes the element take up the entire width of its parent container.
14. How can you make a webpage's content scale properly across various devices?
- a) By using the meta tag with the viewport setting
- b) By setting a fixed width for all elements
- c) By using inline styles only
- d) By adding multiple HTML files for different devices
Answer: a) By using the meta tag with the viewport setting
Explanation: The viewport meta tag ensures that the webpage scales properly on different devices by controlling the layout.
15. What does the repeat(2, 1fr) do in a CSS grid?
- a) Creates 1 column with 2 fractions of space
- b) Creates 2 equal-width columns
- c) Creates 2 fixed-width columns
- d) Creates 1 column and adds 2 rows
Answer: b) Creates 2 equal-width columns
Explanation: repeat(2, 1fr) creates 2 columns of equal width, where 1fr represents one fraction of the available space.
16. What is the effect of @media (max-width: 600px) in CSS?
- a) Targets screens with a width of 600px or less
- b) Targets screens with a height of 600px or less
- c) Targets screens with a width of 600px or more
- d) Does nothing by default
Answer: a) Targets screens with a width of 600px or less
Explanation: The max-width: 600px media query applies styles for devices with a width of 600px or smaller.
17. How do you make a grid layout responsive?
- a) By setting grid-template-columns to a fixed value
- b) By adjusting grid-template-columns within media queries
- c) By removing gap
- d) By using position: fixed
Answer: b) By adjusting grid-template-columns within media queries
Explanation: Media queries can change the grid layout based on the screen size, such as adjusting the number of columns.
18. What does the flex-wrap property do in a flexbox layout?
- a) It allows items to wrap onto the next line
- b) It fixes the items to one line
- c) It centers the items in the container
- d) It defines the number of items in each row
Answer: a) It allows items to wrap onto the next line
Explanation: The flex-wrap property allows flex items to wrap into multiple lines if necessary.
19. Which of the following is true about a mobile-first approach in responsive design?
- a) You design for desktop first, then adjust for mobile
- b) You design for mobile first, then adjust for larger screens
- c) It requires separate HTML files for different devices
- d) It uses more images and videos than a desktop-first design
Answer: b) You design for mobile first, then adjust for larger screens
Explanation: In a mobile-first approach, you design for smaller screens and then scale up for larger screens.
20. What is the primary advantage of using flexbox for layout?
- a) It is always grid-based
- b) It makes items responsive without media queries
- c) It allows easy alignment and distribution of items
- d) It works only with columns, not rows
Answer: c) It allows easy alignment and distribution of items
Explanation: flexbox makes it easy to align and distribute items within a container, both horizontally and vertically.
21. How do you center an element horizontally using flexbox?
- a) justify-content: center;
- b) align-items: center;
- c) position: absolute;
- d) text-align: center;
Answer: a) justify-content: center;
Explanation: justify-content: center; centers items horizontally within a flex container.
22. How does flex-direction: column; affect the layout of flexbox items?
- a) Arranges the items in a horizontal row
- b) Arranges the items in a vertical column
- c) Centers the items horizontally
- d) Stretches the items across the page
Answer: b) Arranges the items in a vertical column
Explanation: flex-direction: column; arranges flex items vertically.
23. What is the use of flex-grow in flexbox?
- a) It allows items to shrink to fit the container
- b) It defines the initial size of items
- c) It allows items to grow and fill available space
- d) It changes the direction of the flex container
Answer: c) It allows items to grow and fill available space
Explanation: The flex-grow property allows flex items to grow and take up any remaining space in the flex container.
24. What does flex-shrink: 0; do in a flexbox container?
- a) It prevents flex items from growing
- b) It prevents flex items from shrinking
- c) It allows flex items to shrink
- d) It centers the flex items
Answer: b) It prevents flex items from shrinking
Explanation: flex-shrink: 0; prevents flex items from shrinking when there is not enough space in the container.
25. Which of the following does not affect the layout of flex items?
- a) justify-content
- b) align-items
- c) border
- d) position
Answer: d) position
Explanation: The position property does not affect the layout of flex items within a flex container.
4o mini
You said:
rest 25
ChatGPT said:
ChatGPT
Here are the remaining 25 MCQs:
26. What is the purpose of @media (min-width: 768px)?
- a) To apply styles for screens smaller than 768px
- b) To apply styles for screens larger than 768px
- c) To apply styles for screens with a height larger than 768px
- d) To apply styles for screens with a width equal to 768px
Answer: b) To apply styles for screens larger than 768px
Explanation: min-width: 768px applies the styles to devices with a width greater than or equal to 768px.
27. How do you make an element responsive using the vw (viewport width) unit?
- a) By setting the width based on a percentage of the screen width
- b) By using vw for padding only
- c) By setting vw to the height of the element
- d) By using vw for fixed positioning
Answer: a) By setting the width based on a percentage of the screen width
Explanation: The vw unit is relative to the viewport width, making elements resize proportionally to the screen size.
28. Which of the following ensures that an element is centered both vertically and horizontally in a flex container?
- a) justify-content: center; align-items: center;
- b) display: block; text-align: center;
- c) position: absolute; top: 50%; left: 50%;
- d) margin: 0 auto;
Answer: a) justify-content: center; align-items: center;
Explanation: In a flexbox container, justify-content: center; centers items horizontally, and align-items: center; centers them vertically.
29. What is the effect of @media (max-width: 1200px) in CSS?
- a) Targets devices with a width of 1200px or smaller
- b) Targets devices with a height of 1200px or smaller
- c) Targets devices with a width of 1200px or larger
- d) Targets all devices
Answer: a) Targets devices with a width of 1200px or smaller
Explanation: The max-width: 1200px media query applies styles for devices with a screen width of 1200px or smaller.
30. How do you set the minimum width of a flex container?
- a) min-width: 100%;
- b) width: min-content;
- c) min-width: 100px;
- d) flex: 1;
Answer: c) min-width: 100px;
Explanation: The min-width property ensures the flex container will not shrink below a specified width.
31. What does the @media query @media only screen and (min-width: 768px) do?
- a) Targets all devices with a screen width greater than 768px
- b) Targets only screens with a minimum width of 768px
- c) Targets only screens with a width of exactly 768px
- d) Targets devices with a screen width smaller than 768px
Answer: b) Targets only screens with a minimum width of 768px
Explanation: This query applies styles only for devices that have a screen width of 768px or larger.
32. Which of the following is true about the flex-basis property?
- a) It defines the minimum size of a flex item
- b) It defines the size of the flex item before distribution of space
- c) It sets the item’s size after all other properties are applied
- d) It has no effect on the layout
Answer: b) It defines the size of the flex item before distribution of space
Explanation: The flex-basis property defines the initial size of the flex item before space distribution happens.
33. How do you make a webpage layout adapt to different screen sizes?
- a) Use absolute units for width and height
- b) Use relative units like percentages and vw
- c) Set a fixed layout and avoid resizing
- d) Use display: inline; for all elements
Answer: b) Use relative units like percentages and vw
Explanation: Using relative units such as percentages and viewport-based units (vw, vh) allows elements to adapt based on screen size.
34. Which CSS property is used to make a navigation bar stack vertically on small screens?
- a) flex-wrap: wrap;
- b) display: block;
- c) display: flex;
- d) flex-direction: column;
Answer: d) flex-direction: column;
Explanation: The flex-direction: column; property arranges the items vertically in a flex container, making the navbar stack vertically on small screens.
35. How can you make a CSS grid layout responsive for mobile devices?
- a) Use grid-template-columns in media queries
- b) Use fixed width columns for mobile
- c) Remove grid layout on small screens
- d) Use position: relative;
Answer: a) Use grid-template-columns in media queries
Explanation: Adjusting grid-template-columns within media queries allows the grid layout to adapt for different screen sizes.
36. What does the min-height: 100vh; property do?
- a) Makes an element the full height of the viewport
- b) Makes an element’s height 100% of its parent
- c) Prevents the element from stretching beyond the viewport
- d) Sets the element’s height to the height of its content
Answer: a) Makes an element the full height of the viewport
Explanation: min-height: 100vh; ensures that the element’s minimum height is equal to the full height of the viewport, making it responsive.
37. How can you create a 3-column grid layout that becomes 1 column on small screens?
- a) Use grid-template-columns: repeat(3, 1fr); and adjust with media queries
- b) Use grid-template-columns: 1fr; for small screens
- c) Use grid-template-columns: 3fr; for small screens
- d) Set display: block; for small screens
Answer: a) Use grid-template-columns: repeat(3, 1fr); and adjust with media queries
Explanation: The grid-template-columns: repeat(3, 1fr); defines a 3-column grid, and media queries adjust it to 1 column on small screens.
38. What does box-sizing: border-box; do in responsive design?
- a) Excludes padding and border from the element’s total width and height
- b) Increases the width and height of elements
- c) Makes elements always fill their container
- d) It makes the border invisible
Answer: a) Excludes padding and border from the element’s total width and height
Explanation: box-sizing: border-box; makes sure padding and borders are included in the element’s total width and height, ensuring better layout control.
39. What is the purpose of the @media query @media (orientation: portrait)?
- a) Targets devices in landscape mode
- b) Targets devices in portrait mode
- c) Applies to all devices regardless of orientation
- d) Targets only smartphones
Answer: b) Targets devices in portrait mode
Explanation: The query @media (orientation: portrait) applies styles when the device is in portrait mode (height greater than width).
40. Which of the following defines a flex container?
- a) display: grid;
- b) display: block;
- c) display: flex;
- d) display: inline-block;
Answer: c) display: flex;
Explanation: display: flex; defines a flex container that allows its children to be arranged with the flexbox model.
41. Which unit is relative to the width of the viewport?
- a) em
- b) px
- c) vw
- d) %
Answer: c) vw
Explanation: vw (viewport width) is relative to the width of the viewport, making it ideal for responsive designs.
42. What is the effect of flex-grow: 1; in a flex item?
- a) It allows the item to shrink when there’s not enough space
- b) It prevents the item from growing
- c) It allows the item to take up all available space
- d) It centers the item
Answer: c) It allows the item to take up all available space
Explanation: flex-grow: 1; allows the item to grow and fill any available space in the flex container.
43. What is the purpose of media (max-width: 500px) in responsive design?
- a) Targets screens with a width greater than 500px
- b) Targets screens with a width of exactly 500px
- c) Targets screens with a width less than or equal to 500px
- d) Applies to screens with a height of 500px
Answer: c) Targets screens with a width less than or equal to 500px
Explanation: The max-width: 500px media query applies styles to devices with a screen width of 500px or smaller.
44. How can you create a responsive image in CSS?
- a) By using img { width: 100%; height: auto; }
- b) By using background-size: cover;
- c) By using object-fit: cover;
- d) By setting fixed width and height
Answer: a) By using img { width: 100%; height: auto; }
Explanation: Setting width: 100%; height: auto; ensures the image scales responsively to fit its container.
45. How does grid-template-columns: 1fr 2fr 1fr; work?
- a) It creates 3 equally-sized columns
- b) It creates 3 columns with different widths based on fractions
- c) It creates a 2-column layout with a fixed width
- d) It creates a layout with a single column
Answer: b) It creates 3 columns with different widths based on fractions
Explanation: 1fr 2fr 1fr; defines a grid with 3 columns, the second column being twice as wide as the first and third.
46. How can you apply CSS rules for tablets?
- a) Use @media (min-width: 480px)
- b) Use @media (max-width: 768px)
- c) Use @media (width: 1024px)
- d) Use @media only screen
Answer: b) Use @media (max-width: 768px)
Explanation: Tablets typically have a width of 768px or smaller, so the media query @media (max-width: 768px) is used.
47. What is the effect of flex-wrap: wrap; in a flex container?
- a) It ensures that all items stay on a single line
- b) It allows items to wrap to the next line if there is not enough space
- c) It centers items vertically
- d) It stretches items across the container
Answer: b) It allows items to wrap to the next line if there is not enough space
Explanation: flex-wrap: wrap; allows flex items to move to the next line if there isn’t enough space in the container.
48. How does the @media (min-width: 480px) query work?
- a) It targets devices with a minimum screen width of 480px
- b) It targets devices with a maximum screen width of 480px
- c) It applies styles only for smartphones
- d) It targets devices with a minimum height of 480px
Answer: a) It targets devices with a minimum screen width of 480px
Explanation: The min-width: 480px query applies styles to devices with a screen width of 480px or larger.
49. Which property can be used to hide an element on small screens?
- a) display: none;
- b) visibility: hidden;
- c) position: absolute;
- d) opacity: 0;
Answer: a) display: none;
Explanation: display: none; removes an element from the layout entirely, making it invisible on small screens when used in a media query.
50. What is the best way to test a responsive design?
- a) Test on multiple screen sizes using browser dev tools
- b) Resize the browser window manually
- c) Use only one device for testing
- d) Never test a responsive design
Answer: a) Test on multiple screen sizes using browser dev tools
Explanation: Browser dev tools allow testing responsive designs across different screen sizes and devices, ensuring the design works for various devices.
No comments:
Post a Comment