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中最好这样做。
为清晰起见,请参见图片链接。谢谢。
所以我在网上寻找可行的东西,并在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);
}