[css] VScodeでのcssremモバイル端末適応プラグインの使用

1.プラグインをインストールします

vscode拡張ストアで「cssrem」プラグインを検索します

2.構成を実行および変更します

最初にプラグインを起動し、次に[設定]-> [拡張設定]

を選択して、実際のデザインドラフトに従って基本フォントサイズを

設定します。構成が完了したら、vscodeを再起動できます。

3.jsコードを使用したプログラミング

プロジェクトのベースラインフォントサイズを自動的に変更するjsスクリプトを作成します

cssrem.js、index.htmlのbodyタグの下に導入します。ここでは、100回、つまり100px = 1remに設定します。

fnResize();
window.onresize = function () {
    
    
    fnResize();
    window.addEventListener("resize", fnResize);
};

function fnResize() {
    
    
    let devWidth = document.documentElement.clientWidth || window.innerWidth;
    if (devWidth >= 750) {
    
    
        devWidth = 750;
    }
    if (devWidth <= 320) {
    
    
        devWidth = 320;
    }
    document.documentElement.style.fontSize = devWidth / 7.5 + "px";
}

次に、pxを書き込むときに直接remに変換できます