Practical CSS3 Mastery Course - Media Queries

What is the primary purpose of media queries in web design?

• To improve website loading speed

• To create multiple versions of a website for different devices

• To make a website responsive to different screen sizes

• To enhance the visual appeal of a website

What is the first step in setting up a project to use media queries?

• Create a JavaScript file

• Design a complex layout

• Create and link a CSS file to an HTML file

• Write a detailed project plan

How do media queries help in web design?

• By reducing the number of images on a page

• By enhancing the color scheme of a website

• By providing a fixed layout for all devices

• By allowing dynamic changes to CSS styles based on screen size

What happens when a media query with 'max-width: 300px' is applied?

• Styles are applied to screens wider than 300px

• Styles are applied to all screens

• Styles are applied to screens narrower than 300px

• Styles are ignored

Which CSS property is used to hide elements by default before applying media queries?

• z-index: -1

• display: none

• opacity: 0

• visibility: hidden

What is the purpose of using 'min-width' in a media query?

• To apply styles to screens of a fixed width

• To apply styles to all screens

• To apply styles to screens larger than a certain width

• To apply styles to screens smaller than a certain width

How can you ensure that a media query only applies to screens?

• By using 'print' in the media query

• By using 'all' in the media query

• By using 'only screen' in the media query

• By using 'speech' in the media query

Which tool in the browser helps you test media queries by simulating different devices?

• Elements tab

• Network tab

• Console tab

• Device toolbar

What is a common strategy for designing responsive websites using media queries?

• Design without considering screen size

• Design for the largest screen first

• Design for a medium screen first

• Design for the smallest screen first

What is the effect of using 'max-width' and 'min-width' together in a media query?

• It applies styles to screens outside the specified range

• It prevents any styles from being applied

• It applies styles to screens within the specified range

• It applies styles to all screens