vue vw怎么使用

本篇內(nèi)容介紹了“vue vw怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在vue中，vw是一種視口單位，是根據(jù)窗口的寬度，分成100等份，100vw就表示滿寬，50vw就表示一半寬；vw始終是針對(duì)窗口的寬。vh和vw單位主要用于頁(yè)面視口大小布局，可以根據(jù)電腦瀏覽器自適應(yīng)，在頁(yè)面布局上更加方便簡(jiǎn)單。

傳統(tǒng)的項(xiàng)目開(kāi)發(fā)中，我們只會(huì)用到px、%、em這幾個(gè)單位，它可以適用于大部分的項(xiàng)目開(kāi)發(fā)，且擁有比較良好的兼容性

從CSS3開(kāi)始，瀏覽器對(duì)計(jì)量單位的支持又提升到了另外一個(gè)境界，新增了rem、vh、vw、vm等一些新的計(jì)量單位

利用這些新的單位開(kāi)發(fā)出比較良好的響應(yīng)式頁(yè)面，適應(yīng)多種不同分辨率的終端，包括移動(dòng)設(shè)備等。

Vue項(xiàng)目中也使用vw實(shí)現(xiàn)移動(dòng)端適配。

vh、vw

vw ，就是根據(jù)窗口的寬度，分成100等份，100vw就表示滿寬，50vw就表示一半寬。（vw 始終是針對(duì)窗口的寬），同理，vh則為窗口的高度

這里的窗口分成幾種情況：

• 在桌面端，指的是瀏覽器的可視區(qū)域

• 移動(dòng)端指的就是布局視口

像vw、vh，比較容易混淆的一個(gè)單位是%，不過(guò)百分比寬泛的講是相對(duì)于父元素：

• 對(duì)于普通定位元素就是我們理解的父元素

• 對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素

• 對(duì)于position: fixed;的元素是相對(duì)于 ViewPort（可視窗口）

vh、vw：主要用于頁(yè)面視口大小布局，在頁(yè)面布局上更加方便簡(jiǎn)單

vue項(xiàng)目中使用vw/vh

vw/vh這個(gè)單位可以根據(jù)電腦瀏覽器自適應(yīng)

• vw —— 視口寬度的 1/100；

• vh —— 視口高度的 1/100

在pc端，視口寬高就是瀏覽器得寬高；

在項(xiàng)目中引入插件

npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev
npm i postcss-px-to-viewport-opt

然后在根目錄下面創(chuàng)建postcss.config.js

module.exports = {
    plugins: {
        "autoprefixer": {
            path: ['./src/*']
        },
        "postcss-import": {},
        "postcss-px-to-viewport-opt": {
            "viewportWidth": "1920", //視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度
            "viewportHeight": "1080", // 視窗的高度
            "unitPrecision": 2, //指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)(很多時(shí)候無(wú)法整除)
            "viewportUnit": "vw", //指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
            "selectorBlackList": ['#nprogress'], //指定不轉(zhuǎn)換為視窗單位的類
            "minPixelValue": 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位
            "mediaQuery": false, // 允許在媒體查詢中轉(zhuǎn)換`px`
            // "exclude": /(\/|\\)(node_modules)(\/|\\)/
        },
    }
};

然后重啟項(xiàng)目，之后就可以在頁(yè)面中寫px自動(dòng)轉(zhuǎn)換成vw了。

“vue vw怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！