0

I want to do this

 Let sw be screen width, width be a certain element's width.
 1. sw = 1200px, width = 1000px = 1000/1200*100vw 
 2. sw = 940px,  width = 800px  = 800/940*100vw  
 3. 940 < sw < 1200, width = linearly scale within the bounds 1. and 2.

In js it is easy
width_in_pixel = 1000 + ( sw - 1200 ) * ( 1000 - 940 ) / ( 1200 - 940 );

I know the unit vw, and media query @media (min-width: 940px) and (max-width: 1200px) {} but cannot solve this question, so would somebody please help me:

Is it possible to scale it with pure css/sass (no js)?

Ksthawma
  • 1,257
  • 1
  • 16
  • 28

1 Answers1

0

You can use css calc() function

width: calc( 1000px / 1200px * 100vw)

More Info on CSS calc()

You can do much more with SASS:

$sw = 100vw;

.element {
    width: calc(1000px + ( #{$sw} - 1200px ) * ( 1000px - 940px ) / ( 1200px - 940px ))
}

Note: whenever you’re trying to use Sass variables in calc function, be sure to escape them with #{}

And in order to get exactly what you want, you can use the Sass Control Directives

Razvan B.
  • 6,721
  • 2
  • 19
  • 32