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,我们来看看他们具体都是干什么的

1
2
3
4
5
6
7
8
9
10
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里面应该是这样的

1
2
3
4
5
6
7
8
9
10
"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插件进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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中的某个插件的时候,可以像下面这样操作:

1
2
3
4
5
"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的元素中)

类似这样:

1
2
3
4
5
6
7
8
<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的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
[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的相关处理。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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适配的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

-------------本文结束感谢您的阅读-------------