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 );

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

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

Answer 1

您可以使用css calc()功能

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

CSS calc()

上的

More Info

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

$sw = 100vw;

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

注意：无论何时尝试在calc函数中使用Sass变量，请务必使用＃{}
来转义它们

为了获得您想要的内容，您可以使用Sass Control Directives

按屏幕宽度线性缩放值

1 个答案: