Change font size globally on angular?-CodePudding

I have an angular project which basically shows a single page with a list of things to do (basically a more elaborated to-do list). The screen it shows on can change, since it's thought to be shown on big monitors or even TVs and, as we all know, they may differ in size.

The problem is that the font size may be too small for certain screen, so I need to make an option that allows the user to change the font size of all the application. I thought of doing it with a dropdown list, but I don't really know how to change the font size of every text since they have different classes. I'd like to make it so that the text size changes in percentage, so that it doesn't screw up the font size that it should have by default (for example, a column may have a smaller text size than another column, and that needs to stay true, but I need to be able to change the size proportionally).

CodePudding user response：

You could use a css variable for the fontsize, and change it from js:

<script>
// Get the root element
var r = document.querySelector(':root');

// Create a function for getting a variable value
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: "   rs.getPropertyValue('--blue'));
}

// Create a function for setting a variable value
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

CodePudding user response：

in your styles.css file add

    html { 
        font-size : 62.5%;
        }

This will set the 1 rem = 10px ( by default 1rem = 16px )

now define all the units in your angular project in rems. For changing the font size at a certain screen width in styles.css add a media query with the width and inside the html change the font size to something like font-size: 50% and this will affect the whole app.

The changes will also be reflected Whenever the user changes the browser's font size.