ビジュアル大画面の適応方法-vw/vh

vw および vh 適応スキーム

スクリーン ビューポートの幅 = 100vw、スクリーン ビューポートの高さ = 100vh

       vw と vh も css の標準単位であり、px、rem、% vw および vh 適応スキームと同様に、デザイン ドラフトのサイズに応じて、px を vw と vh に比例して変換します。

       このときsassを使って処理関数をカプセル化し、単位を自動計算してくれると非常に便利

まず、vw と vh の変換式は次のとおりです。

 デザイン案の幅と高さが 1920px = 100vw 
               1080px = 100vh
    の場合、このように幅 300px と 200px の div に対して、それが占める幅と高さは vw と vh の単位で次のように計算されます。 vwDiv = (
    300px / 1920px) * 100vw
    vhDiv = (200px / 1080px) * 100vh

1 つのダウンロード サス
 

npm i sass -D

2つの使用

1. src/style の下に新しい use.scss ファイルを作成し、デザイン ドラフトの幅と高さの 2 つの変数を定義します。

2. scss の組み込み関数 math.div を使用して、vw と vh の 2 つの計算関数を定義します。

3. vw と vh の値を自動的に計算するのに役立つ特定のピクセル値を渡します

use.scss 

//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 
 
 
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
 
 
//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}
 
//px转为vh的函数
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;

3 パス構成

(vite で使用) vue.config.ts

const path = require('path')
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
 
 
module.exports={
	publicPath: '', 
	configureWebpack: {
	  name: "app name",
	  resolve: {
	    alias: {
	      '@': resolve('src')
	    }
	  }
	},
	  css: {
        preprocessorOptions: {
            scss: {
                // 全局 SCSS
                additionalData: '@import "@/assets/scss/ViewPort.scss";'
                // ;不可省略否则会报错
            }
        }
    }
}