[New]Vue項目使用vw實現移動端適配教程

mmy123456 發布于2019-08-22 15:40 / 1772人閱讀

摘要：年月日最新的大漠老師移動端適配方案使用這套方案可以取代首先建議讀者先去學習大漠老師的這篇文章看完能有大大的收獲如何在項目中使用實現移動端適配正文開始使用新建項目安裝依賴復制以下代碼復制進行配置配置

2018年1月25日 11:58:01 最新的大漠老師移動端適配方案,
使用這套方案可以取代flexible.js
首先建議讀者先去學習大漠老師的這篇文章,看完能有大大的收獲

如何在Vue項目中使用vw實現移動端適配 正文開始

使用vue-cli新建項目

vue init webpack vue-demo
cd vue-demo
npm run dev

安裝依賴

復制以下代碼：

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --S

復制進行 postcssrc.js 配置

.postcssrc.js配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      unitPrecision: 3,
      viewportUnit: "vw",
      selectorBlackList: [".ignore", ".hairlines"],
      minPixelValue: 1,
      mediaQuery: false
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

各插件的功能：

postcss-px-to-viewport : 將項目中的px轉化為vw

"postcss-px-to-viewport": { 
    viewportWidth: 750, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750 
    viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置 
    unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除） 
    viewportUnit: "vw", // 指定需要轉換成的視窗單位，建議使用vw 
    selectorBlackList: [".ignore", ".hairlines"], // 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名 
    minPixelValue: 1, // 小于或等于`1px`不轉換為視窗單位，你也可以設置為你想要的值 
    mediaQuery: false // 允許在媒體查詢中轉換`px` 
}

容器適配，可以使用vw

文本的適配，可以使用vw

大于1px的邊框、圓角、陰影都可以使用vw

內距和外距，可以使用vw

postcss-px-to-viewport文檔

postcss-write-svg 實現Retina屏1像素邊框
首先記得在heade頭加入

實例不成功，換插件實現吧

方式一:

方式二:

最重要的降級處理
使用 Viewport Units Buggyfill 插件
在vue項目的index.html文件head標簽添加引用
``
``
在Index.html文件body標簽后添加以下代碼

最后做個對img兼容處理，在全局添加(在main.js 用 Import "@/common/index.css")

img {
  content: normal !important;
}

這樣就可以用vw進行移動端項目開發啦!

GPU云服務器云服務器華為云服務器移動端使用教程移動端適配移動端適配方案移動端適配 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93645.html

Vue.js 移動端適配之 vw 解決方案

摘要：安裝并配置插件還需要安裝對進行配置找到在根目錄中的，對插件進行配置視窗的寬度，對應的是我們設計稿的寬度，一般是視窗的高度，根據設備的寬度來指定，一般指定，也可以不配置指定轉換為視窗單位 1. 安裝并配置PostCss插件 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cs...

golden_hamster 2019-08-29 16:36 評論0 收藏0
【技術】移動端適配 px2rem/px2vw 的原理與實現

摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。簡介【目標】：前端開發移動端及H5時候，不需要再關心移動設備的大小，只需要按照固定設計稿的px值布局！【基礎】 dpr（設備像素比）css的像素px不等于設備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設備無關，css的px需要乘dpr計算為設備像素； css3 的 rem，即ro...

AlexTuan 2019-08-22 18:41 評論0 收藏0
茴字的四種寫法—移動適配方案的進化

摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

canger 2019-08-22 16:12 評論0 收藏0