有没有一种方法可以让div的宽度可变，对于小尺寸设备是96%宽，对于大屏幕是62%宽？

Question

enter image description here我想创建一个scss变量来改变它的大小，在大屏幕上扩展62%的屏幕，在手机等小尺寸设备上扩展96%。我想在不使用媒体查询的情况下实现这一点。

$width-small : 100% - 4%; // For phones and small devices

$width-large :  100% - 32%; // For large devices, laptops and Desktops

@mixin variable-width($width-small, $width-large) {

@if $width-small = '> 768px' {
    width: calc(100% - 4%);
}
@else { 
    width: calc(100% - 38%);
}

//这就是我的想法，我知道这不正确，但这是一个开始

我基本上希望屏幕尺寸随着你的缩小和扩展而缓慢调整，而不是像媒体查询那样跳跃。我想在scss中做这件事作为一个函数更好。

为了清晰起见，请参阅图片链接。谢谢。

Answer 1

所以我在网上搜索一些可行的东西，在codepen中找到了Ana Tudor的答案。没有媒体查询，只有纯洁、优雅、美丽的scss。谢谢你，安娜，所有的荣誉都归功于你。

@mixin proportional-box($a: 1, $b: $a) {
position: absolute;
top: 0; left: calc(50vw - #{$a/$b/2*100vh});
width: $a/$b*100vh; height: 100vh;

@media (max-aspect-ratio: #{$a}/#{$b}) {
top: calc(50vh - #{$b/$a/2*100vw}); left: 0;
width: 100vw; height: $b/$a*100vw;
 }
}

html { 
background: #f9f9f9; 
}

body { 
margin: 0; 
}

.slide {
@include proportional-box(4, 3);
}

在动作https://codepen.io/anon/pen/jYqzPX中查看它