【postcss-px-to-viewport】螢幕適配

^Mao^發表於2024-05-16
CSSView

背景

有的時候我們本地開發的時候使用的px為單位，但是我們想要使用vw單位，這樣可以在不同的螢幕下自動伸縮元素的大小進而達到自適應

解決方案

使用postcss-px-to-viewport第三方外掛。
原理：它主要用於將 CSS 檔案中的 px 單位轉換為 vw/vh 單位，以便實現響應式佈局。然而，這個外掛只作用於 CSS 檔案中的樣式，而不會影響 HTML 檔案中的行內樣式或透過 JavaScript 動態新增的樣式。

  • 行內樣式，我們可以搞個自定義指令v-px-to-vw
  • JS動態新增的樣式，透過公共函式pxToVw手動轉換

效果

實現步驟

  1. 安裝postcss-px-to-viewport為開發依賴
  npm  i -D postcss-px-to-viewport
  1. 在專案目錄下新建 postcss.config.js,並設定當前開發視口的大小
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 1920,
    },
  },
};
  1. 封裝公共函式'utls/pxToVw.js'
import postcss from '../../postcss.config'

export default function pxToVw(size) {
  return 100 * size / postcss.plugins['postcss-px-to-viewport'].viewportWidth + 'vw'
}
  1. 在主入口main.js註冊v-px-to-vw指令
Vue.directive('px-to-vw', {
  inserted(element) {
    // 獲取元素的行內樣式
    const style = element.style.cssText;
    // 正規表示式匹配 px 單位
    const newStyle = style.replace(/(\d+)px/g, (match, p1) => pxToVw(Number(p1)));

    // 設定轉換後的樣式
    element.style.cssText = newStyle;
  })
  1. 在html和js中使用,比如:App.vue
<template>
  <div class="app" ref="appRef">
    <div class="demo" style="width: 200px; height: 100px" v-px-to-vw>
      測試1：行內樣式
    </div>
  </div>
</template>

<script>
import pxToVw from './utils/pxToVw'
export default {
  data() {
    return {}
  },
  mounted() {
    const app_el = this.$refs.appRef

    const test = document.createElement('div')
    test.className = 'test'
    // test.style.width = '300px'
    // test.style.height = '200px'
    test.style.width = pxToVw(300)
    test.style.height = pxToVw(200)
    test.style.backgroundColor = 'pink'
    test.textContent = '測試2：JS程式碼中'
    app_el.append(test)
  },
}
</script>

<style lang="less" scoped>
.app {
  padding: 50px;
}
.demo {
  // width: 200px;
  // height: 300px;
  background: orange;
}
</style>

相關文章