Problem description

Given a <button> element, write CSS rules that enable its font size to adjust fluidly between 16px and 24px as the viewport width changes, ensuring the label remains legible on all devices.

Goal

Use CSS to ensure button text remains legible and appropriately sized by implementing a fluid font sizing approach.

Constraints

• The solution must use an external stylesheet named styles.css.

• Do not use JavaScript.

• Support all modern browsers.

• The font size must scale between a minimum of 16px and a maximum of 24px.

• Viewport widths should be between 320px and 1024px.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.