Question

While designing a page for mobile first view, which of the following media queries can be used?
a) @media only screen (min-width: 768px) { … }
b) @media (min-width: 1024px) { … }
c) @media only screen and (max-width: 572px) { … }
d) @media (max-width: 952px) { … }
e) @media only screen and (min-width: 952px) { … }
f) @media only print and (max-width: 572px) { … }
g) @media only print and (min-width: 572px) { … }

Choose one or more

Answer 1

Answer:

@media (min-width: 1024px) { … }

@media only screen and (min-width: 952px) { … }

@media only print and (min-width: 572px) { … }

Explanation:

Answer 2

@media only screen and (max-width: 768px) is used.

Explanation:

CSS3 introduces media queries as a new CSS technique.

• It use the @media rule to only include a set of CSS properties if a specific condition is met.
• We created a responsive web page with rows and columns earlier in this lesson, but it did not look nice on a small screen.
• That's where media enquiries come in. We may add a breakpoint to the design, which will cause some portions of the design to act differently on each side of the breakpoint.