What are the ways to proportionally compress page content for adaptive layout?

Question

css

Now in the project I use the sass function:

@function calcFluidSize($f-min, $f-max, $v-min, $v-max) {
  $k: ($f-max - $f-min)/($v-max - $v-min);
  $b: $f-min - $k * $v-min;
  $b: $b * 1px;
  @return calc( #{$k} * 100vw + #{$b} );
}

It compresses content perfectly, but there is one drawback: it’s inconvenient to debug through the code in the browser because the output after sass turns out something like this: What other options are there? padding: 1px calc( .04849 * 100vw + -33.10345px)

Answer 1

layout all sizes in 'em'
reducing the font-size of the block will proportionally reduce the entire layout inside, starting at least with the body