vw终极适配方案

这篇文章,主要摘录大漠老师的文章,地址在上篇博客有提到,记录学习一下现在H5适配的主流方向

大漠老师自己也提到了,现在已经弃用了Flexible的布局方案,开始彻底拥抱vw适配方案,当然到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的

废话不多说,直接进入正题,vue-cli中如何使用vw来适配webApp页面

首先,我们需要用到这些工具

NodeJs
NPM
Webpack
Vue-cli
postcss-import
postcss-url
postcss-aspect-ratio-mini
postcss-cssnext
autoprefixer
postcss-px-to-viewport
postcss-write-svg
cssnano

好了,后面会说这些都是干嘛用的,进入项目

构建项目

vue init webpack project

通过Vue-cli构建的项目，在项目的根目录下有一个.postcssrc.js,我们来看看他们具体都是干什么的

module.exports = {
  "plugins": {
    // postcss-import主要功有是解决@import引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url让你引入文件变得更轻松。
    "postcss-import": {},
    // 该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。在Vue项目中，vue-loader已具有类似的功能，只需要配置中将vue-loader配置进去。
    "postcss-url": {},
    // autoprefixer插件是用来自动处理浏览器前缀的一个插件。如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。在配置的时候，未显示的配置相关参数的话，表示使用的是Browserslist指定的列表参数，你也可以像这样来指定last 2 versions 或者 > 5%。如此一来，你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码。这也是PostCSS最常用的一个插件之一。
    "autoprefixer": {}
  }
}

安装插件

我们需要的插件,vue-cli已经默认帮我们安装了三个了,接下来按照剩下的插件

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

安装失败的小伙伴就多安装几次

注意!注意!注意! 敲黑板了! cssnano的版本一定要3.10.0的, 4.0的版本不兼容报错

安装成功后,package.json里面应该是这样的

"dependencies": {
  "cssnano": "^3.10.0",
  "cssnano-preset-advanced": "^4.0.5",
  "postcss-aspect-ratio-mini": "0.0.2",
  "postcss-cssnext": "^3.1.0",
  "postcss-px-to-viewport": "0.0.3",
  "postcss-write-svg": "^3.0.1",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1"
}

配置文件

接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    // postcss-cssnext: postcss-cssnext其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理
    "postcss-cssnext": {},
    // postcss-px-to-viewport: postcss-px-to-viewport插件主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位
    "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`
    },
    // cssnano: cssnano主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。不过你也可以使用postcss-loader显式的使用cssnano
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

特别声明：由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。对于其他的插件使用，代码中的注释都做了简单的介绍。

在cssnano的配置中，使用了preset: “advanced”，所以我们需要另外安装

npm i cssnano-preset-advanced --save-dev

cssnano集成了一些其他的PostCSS插件，如果你想禁用cssnano中的某个插件的时候，可以像下面这样操作：

"cssnano": {
  preset: "advanced",
  autoprefixer: false,
  "postcss-zindex": false
}

上面的代码把autoprefixer和postcss-zindex禁掉了。前者是有重复调用，后者是一个讨厌的东东。只要启用了这个插件，z-index的值就会重置为1。这是一个天坑，千万记得将postcss-zindex设置为false。

到此,配置结束,可以开始撸代码了,直接按照设计稿的大小写样式,编译后会自动转化为vw

在不想要把px转换为vw的时候，首先在对应的元素（html）中添加配置中指定的类名.ignore或.hairlines(.hairlines一般用于设置border-width:0.5px的元素中)

类似这样:

<div class="box ignore"></div>

// ignore 的类,里面的样式不会被转变,这样一个div中,box的类为想要转变的内容,ignore不转变

.ignore {
  margin: 10px;
}

大漠老师还用到了postcss-aspect-ratio-mini

postcss-aspect-ratio-mini主要用来处理元素容器宽高比。在实际使用的时候，具有一个默认的结构。

简单的来说就是自定义属性吧

1
2
3

<div aspectratio w-188-246>
  <div aspectratio-content></div>
</div>

有一点需要特别注意：aspect-ratio属性不能和其他属性写在一起，否则编译出来的属性只会留下aspect-ratio的值

[aspectratio] {
  position: relative;
}

[aspectratio]::before {
  content: '';
  display: block;
  width: 1px;
  margin-left: -1px;
  height: 0;
}

[aspectratio-content] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

[w-188-246] {
  aspect-ratio: '188:246';
}
[w-188-246] {
  width: 188px;
  background-color: red;
}

我个人觉得用起来不大习惯…

1px适配

postcss-write-svg插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。

这里和大漠老师的方法有点不太一样,原理是一样的

@svg 1px-border {
  width: 4px;
  height: 4px;
  @rect {
    fill: transparent;  /*content为透明*/
    width: 100%;  /*宽度为4px * 100%*/
    height: 100%;  /*高度为4px * 100%*/
    stroke-width: 25%;  /*边框宽度 4px * 25%(即1px)*/
    stroke: var(--color, black);  /*颜色*/
  }
}

.example {
  border: 1px solid;
  border-image: svg(1px-border param(--color red)) 1 1 stretch;
}

关于字体

字体的话,大漠老师说了可以直接使用vw适配,如果有小伙伴感觉字体不想变动太大,可以这样子

font-size: calc(18px + 0.25vw)

差不多了,现阶段前端的适配就是这么多了,溜了溜了

以上就是我对webApp适配的一些理解，如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。