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

//、私はあなたが縮小し、拡大し、それを、そしてないとして、私は基本的に画面サイズのようにゆっくりと調整したい

その正確ではないが、そのスタートを知っていますメディアクエリで見られるようにジャンプします。 私はこの機能をscssで行うことをお勧めします。

明瞭にするために画像のリンクをご覧ください。ありがとうございました。

Answer 1

私はWeb上で実行可能なものを探していて、Ana Tudorの答えをcodepenで見つけました。いいえメディアだけでは、純粋でエレガントで美しいscss。アナさん、ありがとうございます。

@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