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

\u2705 rem \u9002\u914D\u65B9\u6848

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

Vant \u4E2D\u7684\u6837\u5F0F\u9ED8\u8BA4\u4F7F\u7528px\u4F5C\u4E3A\u5355\u4F4D\uFF0C\u5982\u679C\u9700\u8981\u4F7F\u7528rem\u5355\u4F4D\uFF0C\u63A8\u8350\u4F7F\u7528\u4EE5\u4E0B\u4E24\u4E2A\u5DE5\u5177:

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']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

\u66F4\u591A\u8BE6\u7EC6\u4FE1\u606F\uFF1A vant

\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\u4E8Ehtml \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 \uFF081rem \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\u7684font-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>
`,19),e=[l];function t(c,r,D,F,y,C){return n(),a("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};