Blog

Question 1:  What is the purpose of CSS media queries?

(A) To define media types for printing only

(B) To apply different styles based on device characteristics

(C) To create animations in CSS

Question 2:  Which of the following is a correct media query syntax?

(A) @media screen and (max-width: 600px) {}

(B) @media (screen max-width: 600px) {}

(C) media-query(max-width: 600px) {}

Question 3:  What does (max-width: 768px) mean in a media query?

(A) The styles apply if the viewport is exactly 768px wide

(B) The styles apply if the viewport is less than or equal to 768px

(C) The styles apply if the viewport is more than 768px wide

Question 4:  Which media type is used for screen devices?

(A) print

(B) screen

(C) all

Question 5:  How can you apply styles only on mobile devices with a max width of 480px?

(A) @media (device-width: 480px) {}

(B) @media screen and (max-width: 480px) {}

(C) @media screen only (width: 480px) {}

Question 6:  Which property helps in making images responsive?

(A) width: auto;

(B) max-width: 100%;

(C) height: fixed;

Question 7:  What is the primary advantage of responsive design?

(A) It loads pages faster on all devices

(B) It makes the website look the same on all screens

(C) It adapts the layout to different screen sizes dynamically

Question 8:  What is the correct way to use multiple conditions in a media query?

(A) @media screen and (min-width: 600px) (max-width: 900px) {}

(B) @media screen and (min-width: 600px) and (max-width: 900px) {}

(C) @media (screen) and (600px < width < 900px) {}

Question 9:  Which CSS unit is most commonly used for flexible font sizes in responsive design?

(A) px

(B) em

(C) rem

Question 10:  Which meta tag is essential for a responsive website?

(A) <meta name='viewport' content='width=device-width initial-scale=1'>

(B) <meta name='responsive' content='true'>

(C) <meta name='device-scale' content='responsive'>