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。谢谢你Ana所有的荣誉归于你。

@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

中查看

对于小型设备，有一种方法可以使用可变宽度mixin，对于小尺寸设备，宽度为96％，对于较大屏幕，宽度为62％吗？

1 个答案: