这篇文章,主要摘录大漠老师的文章,地址在上篇博客有提到,记录学习一下现在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适配的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。