vue-h5-template/assets/guide_vue2_rem.md.39a222d7.js

import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const d=JSON.parse('{"title":"rem \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","lastUpdated":1672820852000}'),o={name:"guide/vue2/rem.md"},l=p(`<h1 id="rem-\u9002\u914D\u65B9\u6848" tabindex="-1">rem \u9002\u914D\u65B9\u6848 <a class="header-anchor" href="#rem-\u9002\u914D\u65B9\u6848" aria-hidden="true">#</a></h1><p>\u4E0D\u7528\u62C5\u5FC3\uFF0C\u9879\u76EE\u5DF2\u7ECF\u914D\u7F6E\u597D\u4E86 <code>rem</code> \u9002\u914D, \u4E0B\u9762\u4EC5\u505A\u4ECB\u7ECD\uFF1A</p><p>Vant \u4E2D\u7684\u6837\u5F0F\u9ED8\u8BA4\u4F7F\u7528<code>px</code>\u4F5C\u4E3A\u5355\u4F4D\uFF0C\u5982\u679C\u9700\u8981\u4F7F\u7528<code>rem</code>\u5355\u4F4D\uFF0C\u63A8\u8350\u4F7F\u7528\u4EE5\u4E0B\u4E24\u4E2A\u5DE5\u5177:</p><ul><li><a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="noreferrer">postcss-pxtorem</a> \u662F\u4E00\u6B3E <code>postcss</code> \u63D2\u4EF6\uFF0C\u7528\u4E8E\u5C06\u5355\u4F4D\u8F6C\u5316\u4E3A <code>rem</code></li><li><a href="https://github.com/amfe/lib-flexible" target="_blank" rel="noreferrer">lib-flexible</a> \u7528\u4E8E\u8BBE\u7F6E <code>rem</code> \u57FA\u51C6\u503C</li></ul><h5 id="postcss-\u914D\u7F6E" tabindex="-1">PostCSS \u914D\u7F6E <a class="header-anchor" href="#postcss-\u914D\u7F6E" aria-hidden="true">#</a></h5><p>\u4E0B\u9762\u63D0\u4F9B\u4E86\u4E00\u4EFD\u57FA\u672C\u7684 <code>postcss</code> \u914D\u7F6E\uFF0C\u53EF\u4EE5\u5728\u6B64\u914D\u7F6E\u7684\u57FA\u7840\u4E0A\u6839\u636E\u9879\u76EE\u9700\u6C42\u8FDB\u884C\u4FEE\u6539</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// https://github.com/michael-ciniawsky/postcss-load-config</span></span>
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">autoprefixer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#F07178;">overrideBrowserslist</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Android 4.1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iOS 7.1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Chrome &gt; 31</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ff &gt; 31</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ie &gt;= 8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">      ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">postcss-pxtorem</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#F07178;">rootValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">37.5</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#F07178;">propList</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div><p>\u66F4\u591A\u8BE6\u7EC6\u4FE1\u606F\uFF1A <a href="https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa" target="_blank" rel="noreferrer">vant</a></p><p><strong>\u65B0\u624B\u5FC5\u770B\uFF0C\u8001\u9E1F\u8DF3\u8FC7</strong></p><p>\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\u6982\u666E\u53CA\u4E00\u4E0B rem\u3002</p><p>\u6211\u4EEC\u77E5\u9053 <code>1rem</code> \u7B49\u4E8E<code>html</code> \u6839\u5143\u7D20\u8BBE\u5B9A\u7684 <code>font-size</code> \u7684 <code>px</code> \u503C\u3002Vant UI \u8BBE\u7F6E <code>rootValue: 37.5</code>,\u4F60\u53EF\u4EE5\u770B\u5230\u5728 iPhone 6 \u4E0B\u770B\u5230 \uFF08<code>1rem \u7B49\u4E8E 37.5px</code>\uFF09\uFF1A</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">data-dpr</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">font-size: 37.5px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p>\u5207\u6362\u4E0D\u540C\u7684\u673A\u578B\uFF0C\u6839\u5143\u7D20\u53EF\u80FD\u4F1A\u6709\u4E0D\u540C\u7684<code>font-size</code>\u3002\u5F53\u4F60\u5199 css px \u6837\u5F0F\u65F6\uFF0C\u4F1A\u88AB\u7A0B\u5E8F\u6362\u7B97\u6210 <code>rem</code> \u8FBE\u5230\u9002\u914D\u3002</p><p>\u56E0\u4E3A\u6211\u4EEC\u7528\u4E86 Vant \u7684\u7EC4\u4EF6\uFF0C\u9700\u8981\u6309\u7167 <code>rootValue: 37.5</code> \u6765\u5199\u6837\u5F0F\u3002</p><p>\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</p><ul><li>\u5F53<code>rootValue: 70</code> , \u6837\u5F0F <code>width: 750px;height: 1334px;</code> \u56FE\u7247\u4F1A\u6491\u6EE1 iPhone6 \u5C4F\u5E55\uFF0C\u8FD9\u4E2A\u65F6\u5019\u5207\u6362\u5176\u4ED6\u673A\u578B\uFF0C\u56FE\u7247\u4E5F\u4F1A\u8DDF\u7740\u6491\u6EE1\u3002</li><li>\u5F53<code>rootValue: 37.5</code> \u7684\u65F6\u5019\uFF0C\u6837\u5F0F <code>width: 375px;height: 667px;</code> \u56FE\u7247\u4F1A\u6491\u6EE1 iPhone6 \u5C4F\u5E55\u3002</li></ul><p>\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</p><p>\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</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://www.sunniejs.cn/static/weapp/logo.png</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#676E95;">/* rootValue: 75 */</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">image</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">750px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1334px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#676E95;">/* rootValue: 37.5 */</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">image</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">375px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">667px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,19),e=[l];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};