用js實現動態改變根元素字型大小的方法

王铁柱6發表於2024-11-30
JS
function changeRootFontSize(fontSize) {
  // Method 1: Using `document.documentElement.style.fontSize`
  document.documentElement.style.fontSize = fontSize;


  // Method 2: Using `:root` CSS variable and `setProperty` (more flexible)
  // This allows you to use the variable in other CSS rules as well.
  document.documentElement.style.setProperty('--root-font-size', fontSize);


  // Example usage with rem units and the CSS variable:
  //  :root {
  //    --root-font-size: 16px;
  //  }
  //  body {
  //    font-size: 1rem; /* Relative to --root-font-size */
  //  }
  //  h1 {
  //    font-size: 2rem; /* Also relative to --root-font-size */
  //  }

}


// Example usage:
changeRootFontSize('18px'); // Sets root font size to 18px
changeRootFontSize('20px'); // Sets root font size to 20px
changeRootFontSize('1rem'); // Sets root font size to 1rem (browser default)
changeRootFontSize('calc(16px + 0.2vw)'); // Dynamically adjusts based on viewport width



// Example with media queries for responsiveness:  (using CSS variables)
// In your CSS file:
/*
:root {
  --root-font-size: 16px;
}

@media (min-width: 768px) {
  :root {
    --root-font-size: 18px;
  }
}

@media (min-width: 1024px) {
  :root {
    --root-font-size: 20px;
  }
}

body {
  font-size: 1rem; // Uses the --root-font-size variable
}
*/



// Example using a range input to control font size dynamically:
// In your HTML:
/*
<input type="range" id="fontSizeRange" min="14" max="24" value="16" step="1">
*/

// In your JavaScript:
const fontSizeRange = document.getElementById('fontSizeRange');

fontSizeRange.addEventListener('input', function() {
  const fontSize = this.value + 'px';
  changeRootFontSize(fontSize); // Update the root font size as the slider changes
});

Explanation and Best Practices:

  • document.documentElement: This refers to the <html> element, the root of the document. Setting the fontSize style on this element effectively sets the base font size for the entire page.

  • Method 1 (Directly setting fontSize): Simpler, but less flexible. It directly sets the font size of the root element.

  • Method 2 (CSS Variables - :root and setProperty): More robust and maintainable. Defining a CSS variable (--root-font-size) in the :root block allows you to use this variable throughout your CSS. The setProperty method dynamically updates the value of this variable. This approach is preferred because it keeps your styling more organized and allows you to easily adjust the font size in multiple places using a single variable.

  • rem Units: Using rem units (relative to the root element's font size) is highly recommended. This makes your font sizes scale proportionally with the root font size, improving accessibility and responsiveness.

  • Media Queries: Combine CSS variables with media queries to adjust the root font size based on screen size, providing an optimal viewing experience on different devices.

  • Dynamic Control (Range Input Example): The provided example demonstrates how to use a range input to give users control over the font size. This is a great way to enhance accessibility.

  • Accessibility Considerations: Always ensure sufficient contrast between text and background colors, especially when allowing users to adjust font sizes. Consider providing preset font size options (e.g., small, medium, large) in addition to a slider for users who prefer not to use a range input.

By using these techniques, you can effectively manage and dynamically change the root font size in your web applications, leading to a more responsive and user-friendly experience. The CSS variable approach is generally preferred for its flexibility and maintainability.

相關文章