Is there a module in webpack that can calculate the font-size of html tags? - Codes Helper - Programming Question Answer

Is there a module in webpack that can calculate the font-size of html tags?

before using webpack, I put the code for calculating font-size in the header and immediately loaded it into the function. Now that I use Vue Family Bucket + webpack, I will put this calculation code in the created hook function of App.vue. It"s been used like this all the time, and there"s never been a problem.

but I think this method will be a bit stupid, I wonder if there is a module of webpack that can calculate font-size for html tags? But I searched for a long time, but I couldn"t find it. I don"t know how your project is done. Is it the same way to expose the "dirty code"?

there are many modules in the px-to-rem class, including gulp, but computing font-size can"t be found, and font-size can be written into css instead of tags with modules.

also, I copied NetEase"s JavaScript code for calculating font-size. Where did you copy your code? is there a common project code that is used by many big companies and big projects?

I just think my practice of "copying code casually on the Internet" and "finding a place to paste it and run" is not standard.

Webpack javascript css vue.js node.js

Jul.22,2021

looking at the question of the subject, the subject should have used the rem adaptation scheme.

when to calculate: the only way to calculate the fontSize of html through js is that when the width of the web page can be obtained, as soon as the web page is opened, the browser's window information (clientWidth) can be obtained through BOM. So, of course, the earlier the calculation, the better.
if you don't need to package this code, you can directly introduce script into head. Of course, you need to put it behind the meta tag of viewport. Zooming will affect the value of fontSize.
of course, this introduction is a bit different for webpack projects. In general, vue scaffolding projects can be placed in the entry file main.js, which is a js file used to introduce vue framework, other plug-ins such as router,vuex and the root node of instance vue. These imports do not include any business, so you can put the preceding business in this file. For example, the subject needs to calculate the business of fontSize.
there is no problem with putting it in App.vue, because for the scaffolding project of vue, App.vue is the first child node under the root node of a single file component, and there are no sibling nodes, only child nodes, and the parent node is only used to initialize the root node of vue. Therefore, if there is no special style of id=app div, in fact, it will not be affected.

rem scheme must have a web page open to determine the value of rem, so it is unlikely to be written into CSS unless you enumerate
copy is really not very good. First of all, you have to make sure that the copyright is fine, and then the copied code is not good for dependency management
at present, the most popular dependency management is npm and yarn,. You can take a look at the relevant content

Previous: The data table finds a piece of data to find a reasonable table structure according to two range conditions (two range values respectively).

Next: How to use nz-date-picker in ng-zorro-antd in angular6?

Menu