A
A
Alexander2017-05-26 14:04:06
css
Alexander, 2017-05-26 14:04:06

Is it worth using js to calculate the sizes of elements?

I am writing a website with a fully rubber interface. That is, the site is scaled depending on the width of the screen, since the dimensions of almost all elements are set using vw. I really like this approach, since the site looks almost identical on all devices (we are talking about desktops, laptops and tablets, with phones a separate conversation). But there are certain problems, namely, sometimes, under certain circumstances, some bugs appear, for example, there may be two blocks with the same size (for example, 10vw in width), but in fact one block is 1px larger than the other. I have identified some dependencies for these bugs to appear and how to deal with them. For example, in almost all cases, the tricky use of backface-visibility helps. But as you know, this property can cause a rather serious load on the device, especially in my case, since the interface is very rich and has a large number of animations. I strive to make the interface of the site similar to the interfaces of native applications. You have to balance very professionally on the edge of beauty / quality / performance and always look for the best compromises.
Now I'm going to master vue.js and transfer the site completely to it. This opens up a lot of interesting possibilities. For example, instead of using vh, vw units, I can calculate all the sizes of interface elements right on the spot with each change in window size in pixels. I think this will save me from a lot of unpleasant problems and untie my hands in choosing different layout options.
Actually the question is whether such an approach is applied at all somewhere? Can I look at some examples? Are there any significant drawbacks in this method? Are there any ready-made tools or approaches to implement such functionality?
I do not think that I will have any serious problems with the implementation of this idea, but still I would like to hear someone else's opinion on this issue.
PS: I want to note that the site is a SPA, that is, all sizes will be calculated only when the site is launched and when the window is resized simultaneously with the rendering of the SPA itself.
PSS: Moreover, there is an idea to store in local storage the result of the previous size calculation and the screen width that was used for this. Thus, if the window size does not change, then this miscalculation will generally occur only once.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
S
sim3x, 2017-05-26
@sim3x

Is it worth using js to calculate the sizes of elements?
no. Never
Use Quari Pixels and Media

D
dinegnet, 2017-05-26
@dinegnet

I wouldn't recommend doing this.
Previously - because of the zoo of browser engines.
Now because of the zoo of resolutions and screen sizes.
It is permissible only if:
You fight, you fight and you can’t decide without it.
Needs to be fixed quickly.
There are no time resources / the customer pays poorly and you want to quickly and cheaply make the appearance of
P.S.
And this is still without even taking into account the fact that the tools are better used for their intended purpose.

N
Nicholas, 2017-05-26
@healqq

At best, everything will just slow down wildly (especially in the context of the fact that you are going to make a game). Getting sizes from js leads to a forced relayout, which is always bad.
In general, it is difficult to imagine such an interface that cannot be implemented using modern technologies (flex/grid/.../calc/...). A couple of screenshots would definitely help.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question