div에 대해 가변 폭 mixin을 사용할 수있는 방법은 소형 장치의 경우 96 %, 대형 화면의 경우 62 %입니다.

Question

enter image description here 대용량 스크린의 경우 62 %, 휴대 전화 같은 소형 기기의 경우 96 %의 크기로 변경되는 scss 변수를 만들고 싶습니다. 나는 미디어 쿼리를 사용하지 않고 이것을 달성하고자한다.

$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%); 
} 

//이, 내가 생각을 알고 자사의 정확하지하지만 시작

I 화면 크기는 당신이 그것을 축소 및 확장 천천히 조정, 그리고 기본적 싶습니다 미디어 쿼리에서 볼 수있는 것처럼 점프. 나는이 기능을 scss로하고 싶다.

명확성을 위해 이미지 링크를 참조하십시오. 고맙습니다.

Answer 1

그래서 저는 웹상에서 실행 가능한 것을 찾고 있었고 Ana Tudor의 답을 codepen에서 발견했습니다. 아니 미디어 쿼리 그냥 순수하고 우아한 아름다운 scss. 아나 감사합니다 모든 신용은 당신에게 간다. 당신이 시도 CSS의 CALC() 함수로 이동 싶어 경우

@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