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

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

$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로하고 싶다.

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

출처

2017-12-11 Michael Raysh

는 미디어 쿼리없이 반응 수행 행동을 확인하지만. – reidark

그래, 보통 나는 높이에 대해 calc 함수를 사용하지만 변수 너비 컨테이너에 대해 어떻게 할 것인지 알고 있습니까? 따라서 전화 크기가 540px 이하인 경우 각면의 여백을 2 %로 설정하여 전체 너비가 96 %가되도록하고 싶습니다. 가장 큰 크기의 경우 62 % 만 확장하고 양쪽면에 자동 여백을두기를 바랍니다. 이것이 가능한가? –

scss는 css로 컴파일되고 브라우저는 css를 사용하므로 mediaqueries가 없으면 CSS에이 방법을 쓸 수 없습니다. 그들은 css에서 if else 구조와 같은 역할을합니다. –

그래서 저는 웹상에서 실행 가능한 것을 찾고 있었고 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

출처

2017-12-19 18:34:08

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

답변

관련 문제