どのようにVUEプロジェクトの終了時に画面アダプテーション(レムレイアウト)が移動

1. main.jsファイルに組み込まれているrem.js最初のファイルを作成し、以下のように、具体的な構成であります

32 baseSize =定数
//関数設けレム
関数setRem(){
//ワイドスケール750に現在のページ幅は、自分のニーズに応じて変更してもよいです。
スケールdocument.documentElement.clientWidth = CONST / 750
ルート・ページのフォントサイズ設定//
document.documentElement.style.fontSize =(* baseSize Math.min(スケール、2))+ 'PXは、'}
//初期化
(setRemを)
/再設定/変更ウィンドウサイズレム
window.onresize =関数(){
setRem()
}

2.ダウンロードpostcss-pxtoremは(NPM postcss-インストール pxtorem --save)を、 次のように具体的な構成は
変更.postcssrc.jsファイルを内部に配置されたアイテムの追加、
"postcss-pxtoremを":{
"rootValue" 32、
"propList":[ 「*」]
}
これは自動的にあなたがプロジェクトに直接レムユニットを書きたい場合はindex.htmlには、内部に次のように、あなたが書くことができ、それを促進するために、あなたはレムにPXのに役立ちます:fnResize()
window.onresize =関数() {
fnResize()
}
関数fnResize(){
VAR deviceWidth document.documentElement.clientWidth = || window.innerWidth
IF(deviceWidth> = 750){
deviceWidth = 750
}
(deviceWidth <= 320){IF
deviceWidth = 320
}
はdocument.firstChild .style.fontSize =(deviceWidth / 7.5)+ 「PX」}
100pxに= 1remを定義し、この構成は、プロジェクトREM単位で直接使用することができ、それ自体ができカウントします

ます。https://juejin.im/post/5cf729c15188257480599434で再現

おすすめ

転載: blog.csdn.net/weixin_33851604/article/details/91459936