<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">import{_ as e,r as p,o as t,c as o,b as n,d as s,e as l,a as c}from"./app-Bp7xV703.js";const r={},i={href:"https://www.npmjs.com/package/postcss-px-to-viewport",target:"_blank",rel:"noopener noreferrer"},u=c(`&lt;p&gt;###å®‰è£…&lt;/p&gt;&lt;div class="language-bash line-numbers-mode" data-ext="sh" data-title="sh"&gt;&lt;pre class="language-bash"&gt;&lt;code&gt;&lt;span class="token function"&gt;npm&lt;/span&gt; &lt;span class="token function"&gt;install&lt;/span&gt; postcss-px-to-viewport --save-dev
&lt;/code&gt;&lt;/pre&gt;&lt;div class="line-numbers" aria-hidden="true"&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;###ä½¿ç”¨&lt;/p&gt;&lt;div class="language-javascript line-numbers-mode" data-ext="js" data-title="js"&gt;&lt;pre class="language-javascript"&gt;&lt;code&gt;&lt;span class="token comment"&gt;// vite.config.js&lt;/span&gt;
&lt;span class="token keyword"&gt;import&lt;/span&gt; vue &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;&amp;#39;@vitejs/plugin-vue2&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token keyword"&gt;import&lt;/span&gt; pxtovw &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;&amp;#39;postcss-px-to-viewport&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token keyword"&gt;const&lt;/span&gt; loder_pxtovw &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token function"&gt;pxtovw&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;unitToConvert&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;&amp;#39;px&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// è¦è½¬åŒ–çš„å•ä½&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;viewportWidth&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;750&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// è§†çª—çš„å®½åº¦ï¼Œå¯¹åº”çš„æ˜¯æˆ‘ä»¬è®¾è®¡ç¨¿çš„å®½åº¦ï¼Œä¸€èˆ¬æ˜¯750&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;viewportHeight&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;1334&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// è§†çª—çš„é«˜åº¦ï¼Œå¯¹åº”çš„æ˜¯æˆ‘ä»¬è®¾è®¡ç¨¿çš„é«˜åº¦ï¼Œä¸€èˆ¬æ˜¯1334&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;unitPrecision&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;5&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// æŒ‡å®š\`px\`è½¬æ¢ä¸ºè§†çª—å•ä½å€¼çš„å°æ•°ä½æ•°ï¼ˆå¾ˆå¤šæ—¶å€™æ—&nbsp;æ³•æ•´é™¤ï¼‰&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;viewportUnit&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;&amp;#39;vw&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// æŒ‡å®šéœ€è¦è½¬æ¢æˆçš„è§†çª—å•ä½ï¼Œå»ºè®®ä½¿ç”¨vw&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;selectorBlackList&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;[&lt;/span&gt;&lt;span class="token string"&gt;&amp;#39;.ignore&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token string"&gt;&amp;#39;.hairlines&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;]&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// æŒ‡å®šä¸è½¬æ¢ä¸ºè§†çª—å•ä½çš„ç±»ï¼Œå¯ä»¥è‡ªå®šä¹‰ï¼Œå¯ä»¥æ—&nbsp;é™æ·»åŠ&nbsp;,å»ºè®®å®šä¹‰ä¸€è‡³ä¸¤ä¸ªé€šç”¨çš„ç±»å&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;minPixelValue&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;1&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// å°äºŽæˆ–ç­‰äºŽ\`1px\`ä¸è½¬æ¢ä¸ºè§†çª—å•ä½ï¼Œä½&nbsp;ä¹Ÿå¯ä»¥è®¾ç½®ä¸ºä½&nbsp;æƒ³è¦çš„å€¼&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;mediaQuery&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token boolean"&gt;false&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// å…è®¸åœ¨åª’ä½“æŸ¥è¯¢ä¸­è½¬æ¢\`px\`&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;exclude&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;[&lt;/span&gt;&lt;span class="token regex"&gt;&lt;span class="token regex-delimiter"&gt;/&lt;/span&gt;&lt;span class="token regex-source language-regex"&gt;node_modules&lt;/span&gt;&lt;span class="token regex-delimiter"&gt;/&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;]&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// å¿½ç•¥æŸäº›æ–‡ä»¶å¤¹ä¸‹çš„æ–‡ä»¶æˆ–ç‰¹å®šæ–‡ä»¶ï¼Œä¾‹å¦‚ &amp;#39;node_modules&amp;#39; ä¸‹çš„æ–‡ä»¶&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;landscape&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token boolean"&gt;false&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// æ˜¯å¦æ·»åŠ&nbsp;æ&nbsp;¹æ® landscapeWidth ç”Ÿæˆçš„åª’ä½“æŸ¥è¯¢æ¡ä»¶ @media (orientation: landscape)&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;landscapeUnit&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;&amp;#39;vw&amp;#39;&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token comment"&gt;// æ¨ªå±æ—¶ä½¿ç”¨çš„å•ä½&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;landscapeWidth&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token number"&gt;568&lt;/span&gt; &lt;span class="token comment"&gt;// æ¨ªå±æ—¶ä½¿ç”¨çš„è§†çª—å®½åº¦&lt;/span&gt;
&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;

&lt;span class="token keyword"&gt;export&lt;/span&gt; &lt;span class="token keyword"&gt;default&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;plugins&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;[&lt;/span&gt;
    &lt;span class="token function"&gt;vue&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token punctuation"&gt;]&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
  &lt;span class="token literal-property property"&gt;css&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property"&gt;postcss&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt;
      &lt;span class="token literal-property property"&gt;plugins&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;[&lt;/span&gt;loder_pxtovw&lt;span class="token punctuation"&gt;]&lt;/span&gt;
    &lt;span class="token punctuation"&gt;}&lt;/span&gt;
  &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt;
&lt;span class="token punctuation"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;div class="line-numbers" aria-hidden="true"&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;div class="line-number"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;`,4);function k(d,m){const a=p("ExternalLinkIcon");return t(),o("div",null,[n("p",null,[n("a",i,[s("postcss-px-to-viewport"),l(a)]),s(" å°†pxå•ä½è½¬æ¢ä¸ºè§†å£å•ä½çš„ (vw, vh, vmin, vmax) çš„ PostCSS æ’ä»¶ã€‚å¦‚æžœä½&nbsp;çš„æ&nbsp;·å¼éœ€è¦åšæ&nbsp;¹æ®è§†å£å¤§å°æ¥è°ƒæ•´å®½åº¦ï¼Œè¿™ä¸ªè„šæœ¬å¯ä»¥å°†ä½&nbsp;CSSä¸­çš„pxå•ä½è½¬åŒ–ä¸ºvwï¼Œ1vwç­‰äºŽ1/100è§†å£å®½åº¦ã€‚")]),u])}const b=e(r,[["render",k],["__file","20.html.vue"]]),y=JSON.parse('{"path":"/npm/20.html","title":"postcss-px-to-viewport","lang":"zh-CN","frontmatter":{"title":"postcss-px-to-viewport","date":"2024-11-19T11:22:10.000Z"},"headers":[],"git":{"updatedTime":1731988211000,"contributors":[{"name":"pengrengui","email":"993780817@qq.com","commits":1}]},"filePathRelative":"npm/20.md"}');export{b as comp,y as data};
</pre></body></html>