ICT 10 Third Quarterly Assessment Review

Which of the following is NOT a feature of responsive design?

• Fixed positioning

• Flexible images

• Fluid grids

• Media queries

To ensure that images are responsive, which CSS property is commonly used?

• height: auto;

• max-width: 100%;

• width: 100%;

• Both
  max-width: 100%;
  and
  width: 100%;

What does the mobile-first design approach prioritize?

• Desktop users

• A single fixed layout

• Ignoring user experience

• Mobile users and their experience

In a mobile-first design strategy, what is typically the first step?

• Designing for desktops

• Ignoring mobile design

• Adding complex features

• Creating a basic layout for mobile devices

In a mobile-first approach, how should you handle images?

• Use fixed-size images

• Ignore image optimization

• Use larger images for mobile

• Optimize images for smaller screen sizes

What should you avoid when defining breakpoints?

• Using relative units

• Using flexible widths and percentages

• Testing your design on various devices

• Making assumptions about device sizes

How can you target landscape mode with a media query?

• @media (width: 100vh)

• @media (height: 600px)

• @media (orientation: portrait)

• @media (orientation: landscape)

Which of the following is a common mistake when using media queries?

• Using too many breakpoints

• Not testing on various devices

• Ignoring the mobile-first approach

• All of the above

Why are responsive images important?

• They increase load times.

• They reduce the need for CSS.

• They are easier to code than fixed images.

• They adapt to different screen sizes, improving load times.

Ethan is creating a travel blog. He wants to include images that adapt to screen size. What should he use?

• Ignore images

• Fixed-width images

• Only one image size

• The <picture> element and responsive images