Media Queries

What is the purpose of media queries in CSS?

• To style HTML elements

• To apply different styles based on device characteristics

• To add interactivity to a website

• To define animations

Which of the following is a correct media query syntax?

• @media screen and (min-width: 600px)

• @query media screen (min-width: 600px)

• media (max-width: 600px)

• @media-query (min-width: 600px)

What does the min-width media feature in a media query do?

• Targets screens that are at least a certain width

• Targets screens that are less than a certain width

• Targets only mobile devices

• Specifies the height of the viewport

How would you target devices with a maximum width of 768 pixels?

• @media screen and (max-height: 768px)

• @media only screen and (max-width: 768px)

• @media device-width 768px

• @media (width: 768px)

How can you apply styles for screens wider than 1200 pixels?

• @media screen and (min-width: 1200px)

• @media (max-width: 1200px)

• @media only (min-width: 1200px)

• @media screen width > 1200px

What is the default media type if none is specified in a media query?

• print

• screen

• all

• none

What does the max-width media feature do?

• Targets devices with screens larger than the specified width

• Targets devices with screens smaller than or equal to the specified width

• Targets devices in landscape mode only

• Defines the maximum height of the viewport

Which unit is commonly used with media queries to check screen width?

• em

• rem

• px

• percent

How would you target devices with a minimum height of 700px?

• @media screen and (min-width: 700px)

• @media screen and (min-height: 700px)

• @media (min-screen-height: 700px)

• @media screen and (height > 700px)

What does the rem unit stand for?

• Root Em

• Relative Em

• Responsive Em

• Rescaled Em