I have set the :root {font-size: 10px} property to use rems or pixels as units for users, that scales the browser's font (Chrome example: Settings => Appearance => Font Size = Large). So every time I want to see how chosen units affects UI, I need to go to settings and apply different font scales every time.

Is there a simple way to do this instead of getting in the browser's settings?

[upd]

1. ctrl / ctrl- does not work the same as font scale in browser, which i'm asking about.
2. I know how to change scale in settings, i'm asking for an options to quickly change it in devtools.

CodePudding user response：

Use the following keyboard shortcuts,

1. Cmd or Ctrl , to increase the font size
2. Cmd- or Ctrl-, to decrease the font size
3. Cmd 0 or Ctrl 0 to reset the font size

The browser will persist this setting for the domain, until you reset the font-size.

CodePudding user response：

If you are trying to change the font size on your Chrome browser, you can refer to documentation here.

The relevant portion is:

Set page or font size for all webpages

You can change the size of everything on the webpages you visit, including text, images, and videos, or you can change only the size of the font.

Note: Some websites don't let browsers change only the text size. For those sites, Chrome won’t be able to adjust the font size.

1. On your computer, open Chrome.

2. At the top right, click More More and then Settings.

3. Click Appearance.

4. Make the changes you want:

   • Change everything: Next to "Page zoom," click the Down arrow Down arrow. Then select the zoom option you want.
   • Change font size: Next to "Font size," click the Down arrow Down arrow. Then select the font size you want. You can also change more font options by clicking Customize fonts.