vue3.0`vw`を`px`に置き換えることで適合問題を解決
2195 ワード
シナリオ:postcss-px-to-viewport
インストール:npm install postcss-px-to-viewport--save-dev使用:プラグインの構成オプションにexcludeオプションがあり、その値は正規表現のみをサポートするが、正規表現はjsonでは許されないのでpackageに構成しないでください.jsonではvueに配置する.config.js里
unitToConvert(String)変換する単位、デフォルトは'px'viewportWidth(Number)viewportの幅、デフォルトは320で、設計原稿に基づいて750の設計原稿を書くことができます750 unitPrecision(Number)は
@keyframesはvw単位の変換結果を一時的に手動で記入できます
シナリオ2
あとはそのままremと書きます
インストール:npm install postcss-px-to-viewport--save-dev使用:プラグインの構成オプションにexcludeオプションがあり、その値は正規表現のみをサポートするが、正規表現はjsonでは許されないのでpackageに構成しないでください.jsonではvueに配置する.config.js里
devServer: {
port: 8080,
disableHostCheck: true,
},
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 3,
propList: [
"*"
],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: /(\/|\\)(node_modules)(\/|\\)/,
})
]
}
}
}
}
unitToConvert(String)変換する単位、デフォルトは'px'viewportWidth(Number)viewportの幅、デフォルトは320で、設計原稿に基づいて750の設計原稿を書くことができます750 unitPrecision(Number)は
px
をウィンドウ単位値の小数位数に変換することを指定して、デフォルトは5 propList(Array)が変換できるcss属性を指定して、デフォルトは[’]です.すべての属性を表して変換して正確に一致します*すべての属性を表して文字列の前あるいは後ろで使うことを表して、例えば[‘position’]はbackground-position-yにマッチします!この属性は除外する.例えば:['*','!letter-spacing']Combine the"not"prefix with the other prefixes.Example:[','!font']viewportUnit(String)変換するウィンドウ単位を指定し、デフォルトvw fontViewportUnit(String)フォント変換するウィンドウ単位を指定し、デフォルトvw selectorBlackList(Array)はウィンドウ単位に変換しないクラスを指定し、pxを保持し、値はstringまたは正則regexpであり、1~2つの共通クラス名値をstringタイプとして定義することを推奨します.文字に「body」の一致が含まれているかどうかを確認します.body-class値はregexpタイプで、正則的に一致する.[/body$/]ではなくbodyにマッチします.body minPixelValue(Number)デフォルト値1、1px
以下はウィンドウ単位に変換しない、mediaQuery(Boolean)はメディアクエリ時にもpxを変換するかどうか、デフォルトfalse replace(Boolean)replaces rules containing vw instead of adding fallback.Exclude(Array or Regexp)設定node_modules regexpの場合、一致するファイルはすべて無視されます.配列arrayの場合、指定ファイルは無視されます.問題1、@keyframesとmediaクエリーのpxはデフォルトでは変換されません.mediaQuery:trueを設定するとメディアクエリーでもpxが変換されます.@keyframesはvw単位の変換結果を一時的に手動で記入できます
シナリオ2
html {
font-size: calc(100vw / 7.5);
}
#app {
font-size: initial;
}
あとはそのままremと書きます