Tất Cả Khoá Học
Frontend
Học HTML5 - CSS3
Học Bootstrap
Học JS
Học JQuery
AngularJS
ReactJS
Java
Java Basic
Java Advanced
JSP Servlet
Java Web + EJB (EAD)
Java Web + WebService
Java Web + EA
Spring MVC
Mobile
Lập Trình Android Java
Lập Trình Flutter
CSDL
SQL Server/MySQL
Khác
Lập Trình C
C Sharp
Học PHP
Học Laravel
Git/Github
Trắc Nghiệm Tools
Blog
Jobs & Lập Trình Thời AI
Tin Tức & Công Nghệ
Review Công Nghệ
Phần Mềm & Tiện Ích
Trắc Nghiệm & Học Sinh
Thông Tin Hữu Ích
Quiz
Nhận Dự Án
Liên Hệ
Đăng nhập
QL - Bài Tập & Khoá Học
Tiếp Thị Liên Kết
Thoát
Light
Dark
Auto
Menu
Nhập Môn HTML
Video
Giới thiệu về lập trình web - HTML/CSS
Video
Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS
Video
Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS
Bài tập - Tạo website giới thiệu thông tin cá nhân - profile page - Lập trình HTML/CSS/JS
Tìm Hiểu Thẻ HTML5
Video
Formatting Text using Tags - html tags
Thiết kế trang web Vincent State School - Lập trình html5 / css / javascript
Video
Creating Hyperlinks and Anchors (phần 1) - html tags
Video
Creating Hyperlinks and Anchors (phần 2) - html tags
Video
Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS
Video
Tìm hiểu về đường dẫn file (path file) trong HTML/CSS
Thiết kế website quản lý showroom - galaxy - Lập trình HTML5/CSS/Javascript
CSS
Video
Tìm hiểu thuộc tính trong thẻ html
Video
Giới thiệu CSS & Sử dụng các thuộc tính cơ bản
Video
Hướng dẫn tách biệt CSS và HTML
Video
Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS
Tìm hiểu hiển thị TEXT trong HTML5 và CSS - Phần basic
Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS
Tìm hiểu hiển thị TEXT trong HTML5 và CSS - Phần advanced
Table & CSS
Video
Tìm hiểu table trong HTML/CSS - HTML/CSS
Bài tập ôn luyện Table - Lập trình HTML/CSS/JS
Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS
Form & CSS
Video
Thiết kế form trong HTML/CSS/JS
Video
Tìm hiểu tag videos, audio trong HTML/CSS/JS
Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS
Video
Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS
Thiết kế Form đăng ký tài khoản bằng HTML5/CSS - Thiết kế registation form HTML5/CSS
Thiết Kế Layout
Video
Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS
Video
Hướng dẫn tạo layout bằng thẻ Div căn bản
Video
Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)
Bài tập - Thiết kế website bán đồng hồ - Lập trình HTML/CSS/JS
Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS
Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS
Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS
Bài tập - Thiết kế web truyện tranh - Lập trình HTML/CSS/JS
Tạo website giời thiệu công ty - Lập trình HTML/CSS/JS
Bài tập - Tìm hiểu các công cụ phát triển dự án
Thiết kế form khảo sát - Khóa học HTML/CSS
Bài tập - Thiết kế web tin tức - Khóa học HTML/CSS
Bài tập ôn luyện IFrame - Lập trình HTML/CSS/JS
Examination - Thiết kế website - Lập trình HTML/CSS
Bài tập - Thiết kế web học tiếng anh - Khóa học HTML/CSS/JS
Bài tập - Thiết kế Form quản lý sinh viên
Luyện Thi Lý Thuyết
Bài Thi Lý Thuyết HTML/CSS/JS
Trắc Nghiệm
[Trắc Nghiệm] Kiến thức HTML cơ bản - thẻ trong HTML
[Trắc Nghiệm] Tìm hiểu về tag trong HTML - Thẻ Form, Table trong HTML
[Trắc Nghiệm] Tìm hiểu về CSS cở bản - Text CSS
[Trắc Nghiệm] Luyện tập Layout & CCS khoá học HTML/CSS
[Trắc Nghiệm] Ôn tập phần responsive @media - Lập trình HTML/CSS
Học HTML5 - CSS3
[Trắc Nghiệm] Ôn tập phần responsive @media - Lập trình HTML/CSS
Previous
Next
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?
A:
B:
C:
D:
Đá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?
A:
B:
C:
D:
Đá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
Đã sao chép!!!
Hotline: 0967025996