按屏幕宽度线性缩放值[重复]

Question

我想这样做

 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.

在js中很简单
width_in_pixel = 1000 + ( sw - 1200 ) * ( 1000 - 940 ) / ( 1200 - 940 );

我知道单位vw，媒体查询@media (min-width: 940px) and (max-width: 1200px) {}但无法解决这个问题，请有人帮助我：

是否可以使用纯 css/sass（无 js）进行缩放？

Answer 1

可以使用csscalc()函数

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

More Info 在 CSS 上 calc()

您可以使用 SASS 做更多事情：

$sw = 100vw;

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

注意：每当您尝试在 calc 函数中使用 Sass 变量时，请务必使用 #{}

转义它们

为了得到你想要的，你可以使用Sass Control Directives