[New]Vue项目使用vw实现移动端适配教程

mmy123456 发布于2019-08-22 15:40 / 1775人阅读

摘要：年月日最新的大漠老师移动端适配方案使用这套方案可以取代首先建议读者先去学习大漠老师的这篇文章看完能有大大的收获如何在项目中使用实现移动端适配正文开始使用新建项目安装依赖复制以下代码复制进行配置配置

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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