fastfingertips/responsive_font_size.html

## responsive_font_size.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Size Example</title>
<style>
  :root {
    font-size: calc(1rem + 0.25vw);
  }

  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }

  h1 {
    font-size: 2rem; /* Or any other size you prefer */
  }

  p {
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* Additional styles for responsiveness */
  @media (max-width: 768px) {
    h1 {
      font-size: 1.5rem;
    }
  }

  @media (max-width: 576px) {
    h1 {
      font-size: 1.25rem;
    }
  }

</style>
</head>
<body>

<h1>This is a Heading</h1>

<p>This is a sample paragraph. The font size will adjust based on the viewport width.</p>
<p>Resize the browser window to see the font size change.</p>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Responsive Font Size Example</title>
	<style>
	:root {
	font-size: calc(1rem + 0.25vw);
	}

	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px;
	}

	h1 {
	font-size: 2rem; /* Or any other size you prefer */
	}

	p {
	line-height: 1.6;
	margin-bottom: 20px;
	}

	/* Additional styles for responsiveness */
	@media (max-width: 768px) {
	h1 {
	font-size: 1.5rem;
	}
	}

	@media (max-width: 576px) {
	h1 {
	font-size: 1.25rem;
	}
	}

	</style>
	</head>
	<body>

	<h1>This is a Heading</h1>

	<p>This is a sample paragraph. The font size will adjust based on the viewport width.</p>
	<p>Resize the browser window to see the font size change.</p>

	</body>
	</html>