import{_ as s,c as n,o as a,a as p}from"./app.2b769fcb.js";const i=JSON.parse('{"title":"viewport \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[{"level":2,"title":"PostCSS \u914D\u7F6E","slug":"postcss-\u914D\u7F6E"}],"relativePath":"guide/vue3/viewport.md","lastUpdated":1661153879000}'),l={name:"guide/vue3/viewport.md"},o=p(`

viewport \u9002\u914D\u65B9\u6848

\u4E0D\u7528\u62C5\u5FC3\uFF0C\u9879\u76EE\u5DF2\u7ECF\u914D\u7F6E\u597D\u4E86 viewport \u9002\u914D\uFF0C\u4E0B\u9762\u4EC5\u505A\u4ECB\u7ECD\uFF1A

PostCSS \u914D\u7F6E

\u4E0B\u9762\u63D0\u4F9B\u4E86\u4E00\u4EFD\u57FA\u672C\u7684 postcss \u914D\u7F6E\uFF0C\u53EF\u4EE5\u5728\u6B64\u914D\u7F6E\u7684\u57FA\u7840\u4E0A\u6839\u636E\u9879\u76EE\u9700\u6C42\u8FDB\u884C\u4FEE\u6539

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] },
    'cnjm-postcss-px-to-viewport': {
      unitToConvert: 'px', // \u8981\u8F6C\u5316\u7684\u5355\u4F4D
      viewportWidth: 750, // UI\u8BBE\u8BA1\u7A3F\u7684\u5BBD\u5EA6
      unitPrecision: 6, // \u8F6C\u6362\u540E\u7684\u7CBE\u5EA6\uFF0C\u5373\u5C0F\u6570\u70B9\u4F4D\u6570
      propList: ['*'], // \u6307\u5B9A\u8F6C\u6362\u7684css\u5C5E\u6027\u7684\u5355\u4F4D\uFF0C*\u4EE3\u8868\u5168\u90E8css\u5C5E\u6027\u7684\u5355\u4F4D\u90FD\u8FDB\u884C\u8F6C\u6362
      viewportUnit: 'vw', // \u6307\u5B9A\u9700\u8981\u8F6C\u6362\u6210\u7684\u89C6\u7A97\u5355\u4F4D\uFF0C\u9ED8\u8BA4vw
      fontViewportUnit: 'vw', // \u6307\u5B9A\u5B57\u4F53\u9700\u8981\u8F6C\u6362\u6210\u7684\u89C6\u7A97\u5355\u4F4D\uFF0C\u9ED8\u8BA4vw
      minPixelValue: 1, // \u9ED8\u8BA4\u503C1\uFF0C\u5C0F\u4E8E\u6216\u7B49\u4E8E1px\u5219\u4E0D\u8FDB\u884C\u8F6C\u6362
      mediaQuery: true, // \u662F\u5426\u5728\u5A92\u4F53\u67E5\u8BE2\u7684css\u4EE3\u7801\u4E2D\u4E5F\u8FDB\u884C\u8F6C\u6362\uFF0C\u9ED8\u8BA4false
      replace: true, // \u662F\u5426\u8F6C\u6362\u540E\u76F4\u63A5\u66F4\u6362\u5C5E\u6027\u503C
      include: [],
      exclude: [], // \u8BBE\u7F6E\u5FFD\u7565\u6587\u4EF6\uFF0C\u7528\u6B63\u5219\u505A\u76EE\u5F55\u540D\u5339\u914D
      customFun: ({ file }) => {
        // \u8FD9\u4E2A\u81EA\u5B9A\u4E49\u7684\u65B9\u6CD5\u662F\u9488\u5BF9\u5904\u7406vant\u7EC4\u4EF6\u4E0B\u7684\u8BBE\u8BA1\u7A3F\u4E3A375\u95EE\u9898
        const designWidth = judgeComponent(file) ? 375 : 750;
        return designWidth;
      },
  },
};

\u65B0\u624B\u5FC5\u770B\uFF0C\u8001\u9E1F\u8DF3\u8FC7

\u5F88\u591A\u5C0F\u4F19\u4F34\u4F1A\u95EE\u6211\uFF0C\u9002\u914D\u7684\u95EE\u9898, \u56E0\u4E3A\u6211\u4EEC\u4F7F\u7528\u7684\u662F Vant UI\uFF0C\u6240\u4EE5\u5FC5\u987B\u6839\u636E Vant UI 375 \u7684\u8BBE\u8BA1\u89C4\u8303\u8D70\uFF0C\u4E00\u822C\u6211\u4EEC\u7684\u8BBE\u8BA1\u4F1A\u5C06 UI \u56FE\u4E0A\u4F20\u5230\u84DD\u6E56\uFF0C\u6211\u4EEC\u5C31\u53EF\u4EE5\u9700\u8981\u7684\u5C3A\u5BF8\u4E86\u3002\u4E0B\u9762\u5C31\u5927\u641E\u666E\u53CA\u4E00\u4E0B rem\u3002

\u6211\u4EEC\u77E5\u9053 1rem \u7B49\u4E8E html \u6839\u5143\u7D20\u8BBE\u5B9A\u7684 font-size \u7684 px \u503C\u3002Vant UI \u8BBE\u7F6E rootValue: 37.5 , \u4F60\u53EF\u4EE5\u770B\u5230\u5728 iPhone 6 \u4E0B\u770B\u5230 \uFF08 1rem \u7B49\u4E8E 37.5px \uFF09\uFF1A

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

\u5207\u6362\u4E0D\u540C\u7684\u673A\u578B\uFF0C\u6839\u5143\u7D20\u53EF\u80FD\u4F1A\u6709\u4E0D\u540C\u7684 font-size \u3002\u5F53\u4F60\u5199 css px \u6837\u5F0F\u65F6\uFF0C\u4F1A\u88AB\u7A0B\u5E8F\u6362\u7B97\u6210 rem \u8FBE\u5230\u9002\u914D\u3002

\u56E0\u4E3A\u6211\u4EEC\u7528\u4E86 Vant \u7684\u7EC4\u4EF6\uFF0C\u9700\u8981\u6309\u7167 rootValue: 37.5 \u6765\u5199\u6837\u5F0F\u3002

\u4E3E\u4E2A\u4F8B\u5B50\uFF1A\u8BBE\u8BA1\u7ED9\u4E86\u4F60\u4E00\u5F20 750px * 1334px \u56FE\u7247\uFF0C\u5728 iPhone6 \u4E0A\u94FA\u6EE1\u5C4F\u5E55, \u5176\u4ED6\u673A\u578B\u9002\u914D\u3002

\u4E5F\u5C31\u662F iphone 6 \u4E0B 375px \u5BBD\u5EA6\u5199 CSS\u3002\u5176\u4ED6\u7684\u4F60\u5C31\u53EF\u4EE5\u6839\u636E\u4F60\u8BBE\u8BA1\u56FE\uFF0C\u53BB\u5199\u5BF9\u5E94\u7684\u6837\u5F0F\u5C31\u53EF\u4EE5\u4E86\u3002

\u5F53\u7136\uFF0C\u60F3\u8981\u6491\u6EE1\u5C4F\u5E55\u4F60\u53EF\u4EE5\u4F7F\u7528 100%\uFF0C\u8FD9\u91CC\u53EA\u662F\u4E3E\u4F8B\u8BF4\u660E\u3002

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />

<style>
  /* rootValue: 75 */
  .image {
    width: 750px;
    height: 1334px;
  }

  /* rootValue: 37.5 */
  .image {
    width: 375px;
    height: 667px;
  }
</style>
`,17),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};