<分区>
<分区>
我想做这个
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)对其进行缩放？
最佳答案
你可以使用 css calc() 函数
width: calc( 1000px / 1200px * 100vw)
More Info在 CSS calc()
您可以使用 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 #{}
为了得到你想要的，你可以使用 Sass Control Directives
关于css - 按屏幕宽度线性缩放值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31836631/