有没有办法让一个可变宽度的mixin用于小型设备96%宽,大屏幕宽62%?

问题描述 投票:0回答:1

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中最好这样做。

为清晰起见,请参见图片链接。谢谢。

css variables sass width
1个回答
0
投票

所以我在网上寻找可行的东西,并在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

© www.soinside.com 2019 - 2024. All rights reserved.