[Trắc Nghiệm] Ôn tập phần responsive @media

HTML5 - CSS3 Tutorial

[Trắc Nghiệm] Ôn tập phần responsive @media - Lập trình HTML/CSS

Câu hỏi 1: What is the primary goal of Responsive Web Design?

A: To ensure a website loads as fast as possible on slow connections.
B: To create web pages that automatically adapt and look good on all devices and screen sizes.
C: To make a website interact with user voice commands.
D: To optimize the website's database for mobile devices.

Đáp án: B

Câu hỏi 2: Which HTML meta tag is essential for controlling layout on mobile browsers?

Đáp án: C

Câu hỏi 3: Which CSS rule is used to apply different styles for different media types or devices?

A: @media
B: @responsive
C: @screen
D: @device

Đáp án: A

Câu hỏi 4: What is the recommended CSS rule to make an image responsive so it scales down but never exceeds its original size?

A: width: 100%; height: auto;
B: max-width: 100%; height: auto;
C: width: auto; max-height: 100%;
D: scale: responsive;

Đáp án: B

Câu hỏi 5: What does the 'Mobile First' concept mean in responsive web design?

A: Designing the desktop version first, then hiding elements for mobile.
B: Designing for mobile devices first, then progressively enhancing the design for larger screens.
C: Building a separate mobile app before the website.
D: Using only mobile devices to test the website.

Đáp án: B

Câu hỏi 6: In CSS, what does the unit 'vw' stand for?

A: Vertical Width
B: Visual Width
C: Viewport Width
D: Variable Width

Đáp án: C

Câu hỏi 7: If an element has 'width: 50vw', what does this mean?

A: It takes up 50% of its parent container's width.
B: It takes up 50 pixels of the viewport width.
C: It takes up 50% of the viewport's total width.
D: It takes up 50% of the viewport's total height.

Đáp án: C

Câu hỏi 8: What is a 'breakpoint' in responsive design?

A: A point where the CSS code stops compiling.
B: A specific screen resolution where the website layout changes using media queries.
C: A tag used to break text onto a new line.
D: An error that causes the layout to break on mobile.

Đáp án: B

Câu hỏi 9: Which CSS property solves the issue of padding and borders increasing an element's specified width?

A: box-sizing: border-box;
B: margin: auto;
C: display: flex;
D: overflow: hidden;

Đáp án: A

Câu hỏi 10: Which CSS layout module is designed specifically for laying out items in a single dimension (row or column) and is highly responsive?

A: CSS Grid
B: CSS Floats
C: CSS Flexbox
D: CSS Tables

Đáp án: C

Câu hỏi 11: Which CSS layout module is best suited for two-dimensional layouts (rows and columns) in responsive design?

A: CSS Flexbox
B: CSS Grid
C: CSS Multi-column
D: CSS Positioning

Đáp án: B

Câu hỏi 12: What does the 'rem' unit refer to in CSS?

A: Relative to the parent element's margin.
B: Relative to the font-size of the root element (usually ).
C: Relative to the font-size of the direct parent element.
D: Responsive em, an automated sizing unit.

Đáp án: B

Câu hỏi 13: How do you write a media query that applies styles only when the screen is 600px wide or smaller?

A: @media screen and (min-width: 600px)
B: @media screen and (max-width: 600px)
C: @media screen and (width < 600px)
D: @media (screen

Đáp án: B

Câu hỏi 14: Which property in Flexbox determines whether flex items are forced onto one line or can wrap onto multiple lines?

A: flex-direction
B: justify-content
C: flex-wrap
D: align-items

Đáp án: C

Câu hỏi 15: What is a major advantage of using percentages (%) over pixels (px) for widths in responsive design?

A: Percentages load faster in the browser.
B: Percentages allow elements to scale fluidly relative to their parent container.
C: Percentages are required for media queries to work.
D: Pixels cannot be used on mobile devices.

Đáp án: B

Câu hỏi 16: In CSS Grid, which function is frequently used alongside 'auto-fit' or 'auto-fill' to create responsive, wrapping columns without media queries?

A: calc()
B: minmax()
C: clamp()
D: var()

Đáp án: B

Câu hỏi 17: What is the purpose of the 'clamp()' function in responsive CSS?

A: To fix an element to the top of the viewport.
B: To set a value that scales fluidly between a defined minimum and maximum bound.
C: To hide elements that overflow their container.
D: To force a flex item to stay on the same line.

Đáp án: B

Câu hỏi 18: Which media feature can be used to apply styles based on whether the device is held in portrait or landscape mode?

A: aspect-ratio
B: orientation
C: device-posture
D: display-mode

Đáp án: B

Câu hỏi 19: When building a responsive navigation bar, what is a common pattern for mobile screens?

A: Displaying all links in a massive grid.
B: Hiding the links and showing a 'Hamburger' menu icon to toggle them.
C: Making the text microscopic so it fits on one line.
D: Removing the navigation bar entirely.

Đáp án: B

Câu hỏi 20: Why is it discouraged to use fixed pixel widths (e.g., width: 800px) on main layout containers in modern web design?

A: It causes horizontal scrolling on screens smaller than the fixed width, ruining the user experience.
B: Pixels are deprecated in HTML5.
C: It prevents search engines from indexing the site.
D: Fixed widths automatically disable CSS Flexbox.

Đáp án: A

Câu hỏi 21: What is the primary purpose of the @media rule in CSS?

A: To import external CSS files into the document.
B: To embed video and audio multimedia files.
C: To apply different CSS styles based on device characteristics like screen width.
D: To create CSS animations and transitions.

Đáp án: C

Câu hỏi 22: Which logical operator is used to combine multiple conditions in a single media query, requiring all to be true?

A: only
B: and
C: or
D: not

Đáp án: B

Câu hỏi 23: How do you target devices that are currently in landscape orientation?

A: @media (orientation: landscape)
B: @media (display: landscape)
C: @media (view: landscape)
D: @media (direction: landscape)

Đáp án: A

Câu hỏi 24: Which media query targets screens that are AT LEAST 768 pixels wide?

A: @media (max-width: 768px)
B: @media (width: 768px)
C: @media (min-width: 768px)
D: @media (device-width: 768px)

Đáp án: C

Câu hỏi 25: Which media type should be used to style a document specifically for when it is being printed?

A: @media screen
B: @media print
C: @media document
D: @media paper

Đáp án: B

Câu hỏi 26: How can you apply a specific stylesheet only for screens wider than 800px directly using the HTML tag?

Đáp án: A

Câu hỏi 27: What does the 'only' keyword do in a media query?

A: It applies styles only to the specified HTML element.
B: It prevents older browsers that do not support media queries with media features from applying the given styles.
C: It restricts the media query to a single HTML page.
D: It overrides all other inline CSS rules.

Đáp án: B

Câu hỏi 28: Which media query condition correctly targets screen widths between 500px and 800px?

A: @media (min-width: 500px) or (max-width: 800px)
B: @media (width: 500px-800px)
C: @media (min-width: 500px) and (max-width: 800px)
D: @media (between-width: 500px and 800px)

Đáp án: C

Câu hỏi 29: If no media type (like 'screen' or 'print') is specified in a media query, what is the default assumed value?

A: screen
B: all
C: default
D: auto

Đáp án: B

Câu hỏi 30: Using Level 4 Media Queries, how do you target devices where the primary input mechanism can hover over elements (like a mouse)?

A: @media (pointer: hover)
B: @media (hover: hover)
C: @media (device: mouse)
D: @media (cursor: true)

Đáp án: B