Sassのmixinを活用してスマホページのテキストを可変にする方法


ミックスインを活用することで、一部分だけスマホのテキストを可変させたい場合等に利用できます。

まとめて特定の要素を可変にすることも可能です。

※Android系でzoom指定が不安定な端末もあるので注意。


@mixin spZoom {
    $max-width:1200;
    $min-width:320;
    $step:20;
    $zoom:1.0;
    zoom:$zoom;
    @for $i from 1 through $step {
         $n:$min-width + ( ( ( $max-width - $min-width ) / $step ) * $i );
         @media screen and (min-width:#{$n}px){
               zoom:$n/$min-width;
         }
    }
}


<p class="spZoom">可変させたいテキスト</p>


SNSでもご購読できます。

スポンサーリンク

コメントを残す

*