当你陪着家人嗑着瓜子，和家人一起看着春晚，顺便拿着手淘参与春晚抽奖互动的时候，杭州还有两百多程序员还奋战在一线当中。现在年也过完了，奖也抽了，红包也拿了。也该好好回来工作的时候了。这次很荣幸，自己能参与手淘过年项目（红包开光和春晚互动项目）的项目中，虽然仅仅参与其中的部分工作，但事后感觉有些东西还是应该总结总结的，为之后的项目做准备。那么简单的来总结一下，我自己在参与项目中用到的一些前端技术。

这些技术其实也并不是什么鲜为人知的技术栈，因为这些技术点已经出现很久了，只不过大家习惯了自己的开发模式，加上项目时间紧，怕尝试新的东西。事实上我自己也是如此，害怕使用这些技术点，给项目带来其他的风险（本来项目时间就很紧），庆幸的是，接下来了到的一些东西，经住了项目的考验，虽然当中踩过一些坑，但总算是无惊无险。

过年项目

手淘过年项目，事实上分为两个，其中一个叫红包开光，另一个是春晚抽奖的互动项目。

上面两张图分别是红包开光和春晚互动的主界面视觉图。如果你参与过手淘过年互动的活动中，这两个界面应该对您来说并不会太陌生。

经过团队同学一起讨论，这次两个项目都基于Vue来开发，Vue只是一个JavaScript库而以，选择他并不没有太多的主要原因，而是想让团队在今后的项目开发的时候，JavaScript库能趋于统一，从而慢慢在项目中有所沉淀与积累。基于这个原因，我在其中主要做的事情，在这个脚手架中（也就是Vue-cli的基础）添加了以下三个部分：

• PostCSS插件
• vw适配方案
• iPhone X 适配

PostCSS插件

在互动脚手架中，目前已配置的PostCSS插件主要有：

• postcss-import
• postcss-url
• postcss-aspect-ratio-mini
• postcss-cssnext
• autoprefixer
• postcss-px-to-viewport
• postcss-write-svg
• cssnano
• postcss-viewport-units

PostCSS插件的配置

Webpack项目的.postcssrc.js最终的PostCSS插件的配置:

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

对于这些PostCSS插件所起的作用和怎么配置，在其对应的GitHub上都有详细的描述。这里简要的描述一下，为什么在我们的项目中会采用这些PostCSS的插件：

postcss-import和postcss-url两个主要是用于处理引入的文件和资源路径的处理以及工作模式。如果你的项目也使用的是Vue，并且配置了vue-loader，并且配置了相关的参数，那就就具有类似的功能。

autoprefixer主要用来处理浏览器的私有前缀，这个已经是大家经常使用的一个PostCSS插件了。这里需要提出的是，如果你的项目中使用了postcss-next和cssnano，那么autoprefixer插件可以不引入，而且在postcss-next和cssnano两者中选择其一关闭autoprefixer，因为这两个插件都集成了autoprefixer插件的特性。

postcss-cssnext其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。其包含的特性主要有：

有关于cssnext的每个特性的操作文档，可以点击这里浏览。

cssnano主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。不过你也可以使用postcss-loader显式的使用cssnano。有关于cssnano的详细文档，可以点击这里获取。

注：由于cssnano的preset配置使用的是advanced，所以需要安装npm install cssnano-preset-advanced --save-dev。另外cssnext和cssnano都具有autoprefixer的插件，因此在cssnano中将autoprefixer设置为false。

postcss-write-svg插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background配合SVG绘制的矢量图来做1px的相关处理。后续将会专门花一节的内容来介绍postcss-write-svg或者说怎么能更好的使用SVG来处理移动端1px。

postcss-aspect-ratio-mini主要用来处理元素容器宽高比。在项目当中很多地方会使用img、object或者video，那么这个插件能更好的帮助我们完美处理宽高比的缩放。在实际使用的时候，具有一个默认的结构：

<div aspectratio>
    <div aspectratio-content></div>
</div>

在实际使用的时候，你可以把自定义属性aspectratio和aspectratio-content换成相应的类名，比如：

<div class="aspectratio">
    <div class="aspectratio-content"></div>
</div>

我个人比较喜欢用自定义属性，它和类名所起的作用是同等的。结构定义之后，需要在你的样式文件中添加一个统一的宽度比默认属性：

[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%;
}

如果我们想要做一个188:246（188是容器宽度，246是容器高度）这样的比例容器，只需要这样使用：

[w-188-246] {