The equation asks: how many screen pixels should one pxv equal right now? It works from the inside out:

1. Compare the window’s width with the design’s reference width. A 1440px window against a 1440px design gives a width-based size of 1px per pxv.
2. Decide which height to use. Use the actual window height unless it’s below the configured height floor. With a 500px floor, a 400px-tall window is treated as 500px tall for this calculation.
3. Compare that usable height with the design’s reference height. A usable height of 600px against a 750px reference gives a height-based size of 0.8px per pxv. The aspect-ratio multiplication in the formula converts height into the same sizing terms as width; algebraically, it reduces to this comparison.
4. Blend the width-based and height-based sizes according to squish. At zero squish, use width alone. At full squish, use the height-based size. At 75% squish, combine 25% of the width-based size with 75% of the height-based size. In this example, that produces 0.85px.
5. Choose whichever is smaller: the width-based size or the blended size. This lets short windows reduce sizing, while preventing tall windows from making things larger than their width calls for.
6. Stop the result from exceeding the maximum scale. The library’s default maximum is 1800 ÷ 1440, or 1.25px per pxv.
7. Stop the result from falling below the minimum scale. In desktop mode, the library’s default minimum is 768 ÷ 1440, or about 0.533px per pxv.
8. Use that final value everywhere pxv appears. If one pxv equals 0.85px, then 100pxv renders as 85px.

The nested min() functions choose smaller values to enforce ceilings. The max() functions choose larger values to enforce floors. The arithmetic inside them calculates the sizes those functions are choosing between.

These examples use fixed numbers to explain the process. The formula above uses your current demo settings.