SCSSを用いた30秒のモバイル応答ページ

1319 ワード
webdev react design css テキストリンク
モバイルの応答性は、開発者が行う必要がありますが、まだprorastinatesその迷惑な仕事の一つです.また、これはUI/UXライブラリが初心者の間でブーストを得る理由です.今では良いことだが、同時にそれは何も得ていないので、それは価値がない!
したがって、私が共有しているトリックはSCSSを使用してスタイルのグローバル変数を宣言し、その後、すべてのスタイルを介してそれらを適用することによって、反応プロジェクトで使用することができます

ステップ1 -グローバルscss :



コード


$width:768px;

@mixin mobile {
    @media(max-width: #{$width}){
        @content
    }
}
我々が世界を見ることができるように.SCSSは幅を変数として初期化されます.この幅は、私たちの移動体が使用される(または動作を始める)サイズを示します.

ステップ2 -実装と使用



コード


@import "../../global.scss";

.intro{
    background-color: blue;
    display: flex;

    @include mobile{
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
}
ここでローカル変数でグローバル変数を実装すると、グローバル変数から@include mobileを直接使用し、セクションの調整を記述できます.
そして、我々は時間を費やすことなく、より良いモバイル対応コードを実装しています.
お読みありがとうございます.平和!
HTML & CSS (3)
[情報処理エンジニア実録]WINDOWS関数