分享手淘过年项目中采用到的前端技术

2019-05-01 作者:计算机教程   |   浏览(67)

第三步

添加前面提到的PostCSS插件的配置,当然,你可以只添加处理pxvwvw配合Viewport Units Buggyfill的两个PostCSS插件:postcss-px-to-viewportpostcss-viewport-units

PostCSS插件配置有一个强大之处,不管你使用的是什么脚手架,他的配置都非常的灵活,支持流行的配置工具,比如Webpack,gulp等。所以你不用担心不好配置。因为在使用Flexible时,也需要px2rem的PostCSS插件配置。

适配方案

前面给大家介绍了这个方案目前得到的支持情况以及效果。也扯了不少废话,接下来进入正题吧。

在移动端布局,我们需要面对两个最为重要的问题:

  • 各终端下的适配问题
  • Retina屏的细节处理

不同的终端,我们面对的屏幕分辨率、DPR、1px2x图等一系列的问题。那么这个布局方案也是针对性的解决这些问题,只不过解决这些问题不再是使用Hack手段来处理,而是直接使用原生的CSS技术来处理的。

总结

最后感谢您花时间把这篇文章阅读完。上面介绍的内容就是我自己在手淘过年项目中采用到的部分前端技术,稍作整理与大家分享。如果其中有不对之处,烦请路过的大婶斧正。如果您在自己的项目中将采用上述提到的一些技术方案,踩到任何坑也欢迎一起探讨。

1 赞 4 收藏 1 评论

www.2003.com 1

如何判断自己的应用是否支持

虽然该文的示例,进行了多方面的测试。但很多同学还是会担忧自己的APP应用是否支持该方案,而不敢大胆尝试或者使用。其实不必要这么担心,你可以拿自己的设备,或者应用扫描下面的二维码:

www.2003.com 2

当页面跑完测试之后,找到对应的Values and Units列表项:

www.2003.com 3

如果vw栏是绿色代表你的设备或应用支持该方案;反之则不支持。另外你也可以经常关注css3test相关的更新,后面将会根据相关的规范更新测试代码,让你能快速掌握哪些属性可以大胆使用。

vw适配方案

vw适配方案,主要是用于解决移动端布局的问题。事实上,在手淘,甚至到目前为止都还在使用Flexible的布局方案,用于适配移动端的各种终端。在15年双11之后,写了一篇《使用Flexible实现手淘H5页面的终端适配》博文,将此方案分享给业内,而且该方案在业内快速的被复用和修改(原理是一样的)。

Flexible的适合方案,在那个时期是非常强大的,想出这个方案的大神让我膜拜已久。当然,事物是两极的,他非常强大,但他也有自己的不足之处,特别是在vw得到更多的支持的时候,我觉得Flexible应该退出其历史的使用(这是我自己YY的)。所以在17年年初我开始在探讨vw在移动端中的使用,经过一段时间的探讨和尝试,我写下了《再聊移动端页面的适配》一文。

使用vw可以看到测试用例得到了众多设备的支持:

www.2003.com 4

大家看到众多,或许会生疑,那么还有不支持的将会是怎么?特别是老板跟我说,这次过年项目咱们使用vw来做适配布局吧。其实听到这个消息,我自己是非常高兴的,毕竟学习过的技术方案有较大的项目来验证。心里是美的,但也略感压力,就害怕又会折腾出新的妖蛾子。想想都怕怕(^_^)。

众所周知,浏览器对vw 还具有一定的兼容性,其在Android 4.4之下和iOS8以下的版本都存有一定的问题。为了让vwvhvminvmax这些viewport单位能更好的使用。需要考虑viewport单位在不支持的浏览器(或设备)做相应的处理。

为了能让项目更安全,在决定过年项目中采用vw布局方案的时候,我就又再一次做了一个技术验证,这次是基于Vue的Vue-cli脚手架的上来做的,毕竟我们的项目也要有Vue嘛。在这个脚手加上,我将上面介绍的PostCSS插件配置进去,特别是postcss-px-to-viewportpostcss-viewport-units两个PostCSS插件和Viewport Units Buggyfill让我完美的解决了vw兼容问题。而且让开发者无感知。他们不需要考虑怎么处理兼容,只需要按着设计稿前行。

当然,完成这个技术方案的验证,其中还是碰到一些坑的,幸好能像打老怪一样,一个一个Fix。这里就不阐述整个过程,如果你感兴趣可以阅读《如何在Vue项目中使用vw实现移动端适配》一文。接下来简单的介绍一下vw兼容方案处理方式。

适配终端

首要解决的是适配终端。回想一下,以前的Flexible方案是通过JavaScript来模拟vw的特性,那么到今天为止,vw已经得到了众多浏览器的支持,也就是说,可以直接考虑将vw单位运用于我们的适配布局中。

众所周知,vw是基于Viewport视窗的长度单位,这里的视窗(Viewport)指的就是浏览器可视化的区域,而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下:

www.2003.com 5

 

因为Viewport涉及到的知识点很多,要介绍清楚这方面的知识,都需要几篇文章来进行阐述。@PPK大神有两篇文章详细介绍了这方面的知识。中文可以移步这里进行阅读。

CSS Values and Units Module Level 3中和Viewport相关的单位有四个,分别为vwvhvminvmax

  • vw:是Viewport’s width的简写,1vw等于window.innerWidth1%
  • vh:和vw类似,是Viewport’s height的简写,1vh等于window.innerHeihgt1%
  • vminvmin的值是当前vwvh中较小的值
  • vmaxvmax的值是当前vwvh中较大的值

vminvmax是根据Viewport中长度偏大的那个维度值计算出来的,如果window.innerHeight > window.innerWidthvmin取百分之一的window.innerWidthvmax取百分之一的window.innerHeight计算。

还是用一张图来示意吧,一图胜于千言万语:

www.2003.com 6

所以在这个方案中大胆的使用vw来替代以前Flexible中的rem缩放方案。先来回归到我们的实际业务中来。目前出视觉设计稿,我们都是使用750px宽度的,从上面的原理来看,那么100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。看到这里,很多同学开始感到崩溃,又要计算,能不能简便一点,能不能再简单一点,其实是可以的,我们可以使用PostCSS的插件postcss-px-to-viewport,让我们可以直接在代码中写px,比如:

[w-369]{ width: 369px; } [w-369] h2 span { background: #FF5000; color: #fff; display: inline-block; border-radius: 4px; font-size: 20px; text-shadow: 0 2px 2px #FF5000; padding: 2px 5px; margin-right: 5px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[w-369]{
    width: 369px;
}
 
[w-369] h2 span {
    background: #FF5000;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    font-size: 20px;
    text-shadow: 0 2px 2px #FF5000;
    padding: 2px 5px;
    margin-right: 5px;
}

PostCSS编译之后就是我们所需要的带vw代码:

[w-369] { width: 49.2vw; } [w-369] h2 span { background: #ff5000; color: #fff; display: inline-block; border-radius: .53333vw; text-shadow: 0 0.26667vw 0.26667vw #ff5000; padding: .26667vw .66667vw; } [w-369] h2 span, [w-369] i { font-size: 2.66667vw; margin-right: .66667vw; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[w-369] {
    width: 49.2vw;
}
[w-369] h2 span {
    background: #ff5000;
    color: #fff;
    display: inline-block;
    border-radius: .53333vw;
    text-shadow: 0 0.26667vw 0.26667vw #ff5000;
    padding: .26667vw .66667vw;
}
[w-369] h2 span,
[w-369] i {
    font-size: 2.66667vw;
    margin-right: .66667vw;
}

在实际使用的时候,你可以对该插件进行相关的参数配置:

"postcss-px-to-viewport": { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false }

1
2
3
4
5
6
7
8
9
"postcss-px-to-viewport": {
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 5,
    viewportUnit: 'vw',
    selectorBlackList: [],
    minPixelValue: 1,
    mediaQuery: false
}

假设你的设计稿不是750px而是1125px,那么你就可以修改vewportWidth的值。有关于该插件的详细介绍,可以阅读其官方使用文档

上面解决了pxvw的转换计算。那么在哪些地方可以使用vw来适配我们的页面。根据相关的测试:

  • 容器适配,可以使用vw
  • 文本的适配,可以使用vw
  • 大于1px的边框、圆角、阴影都可以使用vw
  • 内距和外距,可以使用vw

另外有一个细节需要特别的提出,比如我们有一个这样的设计:

www.2003.com 7

如果我们直接使用:

[w-188-246] { width: 188px; } [w-187-246]{ width: 187px }

1
2
3
4
5
6
[w-188-246] {
    width: 188px;
}
[w-187-246]{
    width: 187px
}

最终的效果会造成[w-187-246]容器的高度小于[w-188-246]容器的高度。这个时候我们就需要考虑到容器的长宽比缩放。这方面的方案很多,但我还是推荐工具化来处理,这里推荐@一丝 姐姐写的一个PostCSS插件postcss-aspect-ratio-mini。这个插件使用很简单,不需要做任何的配置,你只需要本地安装一下就OK。使用的时候如下:

[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%; } [aspectratio][aspect-ratio="188/246"]{ aspect-ratio: '188:246'; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[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%;
}
[aspectratio][aspect-ratio="188/246"]{
    aspect-ratio: '188:246';
}

编译出来:

[aspectratio][aspect-ratio="188/246"]:before { padding-top: 130.85106382978725%; }

1
2
3
[aspectratio][aspect-ratio="188/246"]:before {
    padding-top: 130.85106382978725%;
}

这样就可以完美的实现长宽比的效果。有关于这方面的原理在这里不做过多阐述,感兴趣的话可以阅读早前整理的文章:

目前采用PostCSS插件只是一个过渡阶段,在将来我们可以直接在CSS中使用aspect-ratio属性来实现长宽比。

vw兼容方案

移动端使用vw布局,其兼容方案就是使用viewport的polyfill:Viewport Units Buggyfill。使用viewport-units-buggyfill主要分以下几步走:

Viewport不足之处

采用vw来做适配处理并不是只有好处没有任何缺点。有一些细节之处还是存在一定的缺陷的。比如当容器使用vw单位,margin采用px单位时,很容易造成整体宽度超过100vw,从而影响布局效果。对于类似这样的现象,我们可以采用相关的技术进行规避。比如将margin换成padding,并且配合box-sizing。只不过这不是最佳方案,随着将来浏览器或者应用自身的Webview对calc()函数的支持之后,碰到vwpx混合使用的时候,可以结合calc()函数一起使用,这样就可以完美的解决。

另外一点,px转换成vw单位,多少还会存在一定的像素差,毕竟很多时候无法完全整除。

到目前为止,我发现的两个不足之处。或许在后面的使用当中,还会碰到一些其他不为人之的坑。事实也是如此,不管任何方案,踩得坑越多,该方案也越来越强大。希望喜欢这个适配方案的同学和我一起踩坑,让其更为完善。

第二步

在<head>`标签添加meta`标签:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">

1
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">

为了兼容iPhone X的适配,在meta标签中添加了viewport-fit="cover"参数处理。有关于这方面的可以阅读《iPhone X的缺口和CSS》和《iPhone X的Web设计》。

Flexible承载的使命

Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题。而这套方案也相对而言是一个较为成熟的方案。简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段来根据设备的dpr值相应改变`标签中viewport`的值:

!-- dpr = 1--> <meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"/><!-- dpr = 2--><meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/><!-- dpr = 3--><meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no"

1
2
!-- dpr = 1-->
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no"/><!-- dpr = 2--><meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/><!-- dpr = 3--><meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no"

从而让页面达么缩放的效果,也变相的实现页面的适配功能。而其主要的思想有三点:

  • 根据dpr的值来修改viewport实现1px的线
  • 根据dpr的值来修改htmlfont-size,从而使用rem实现等比缩放
  • www.2003.com,使用Hack手段用rem模拟vw特性

有关于Flexible方案实现适配,在2015年双十一之后做过这方面的技术文档分享,感兴趣的同学可以移步阅读《使用Flexible实现手淘H5页面的终端适配》一文。虽然Flexible解决了适配终端很多问题,但它并不是万能的,也不是最优秀的,他还是存在一些问题的,比如iframe的引用,有时候就把我们自己给埋进去了。针对其中的一些不足之处,有些同学对其进行过相关的改造,在网上搜索能找到相关的方案。

那么时代在变化,前端技术在不断的变化,试问:Flexible还是最佳方案?Flexible还有存在的必要吗? 最近一直在探讨这方面,这里先告诉大家Flexible已经完成了他自身的历史使命,我们可以放下Flexible,拥抱新的变化。接下来的内容,我将分享一下我最近自己探讨的新的适配方案,或许很多团队同学已经开始使用了,如果有不对之处,希望能得到大婶们的指正;如果您有更好的方案,希望能一起分享一起探讨。

iPhone X 适配

自从苹果出了iPhone X的设备,对于前端开发的同学而言,避免不了对其适配处理。而且这部分适配的处理相对而言是较为繁锁的。我也一直在探寻从设计开始就能规避一些常规的适配问题。这部分内容正在整理,当其成熟之后再与大家分享。下面简单的罗列一下自己对iPhone X适配的处理思路。

苹果对于iPhone X上H5页面的适配,提供了特殊属性支持,包括meta标签的viewport属性值中加入viewport-fit和加入constant(safe-area-inset-*)env(safe-area-inset-*) ,这些属性是与iOS11以上的所有iPhone机型(不仅仅包括iPhone X)都相关的,故以iOS版本为区别具体分析一下全屏下的H5页面:

  • 针对iOS11.0以下系统:将不识别H5页面meta标签下的viewport-fitconstant(safe-area-inset-*)/env(safe-area-inset-*)属性。
  • 针对于iOS11.0-iOS11.1的系统:当设置了viewport-fit="cover",H5页面会覆盖页面安全区域全屏展示,但是这样会带来页面元素会被“刘海儿”和底部Home Indicator遮挡问题,所以苹果提供在CSS中设置constant(safe-area-inset-*)距离来规避遮挡问题。另外,页面不加viewport-fit="cover"默认viewport-fit="contain/auto",也就是我们看到的页面不能覆盖安全区域的情况,此时constant(safe-area-inset-*)的值都为0。所以在meta标签的viewpoint中加viewport-fit="cover"时iOS10和iOS11下constant(safe-area-inset-*)值的表现是不一样的。
  • 针对iOS11.2及iOS11.2以上的系统:constant()改成了env()。另外,iOS11.2新增了CSS function: min()max()。例如:padding-left: max(12px, env(safe-area-inset-left));。在env(safe-area-inset-left)值因为Webview变化时值也可以做出相应变化,取12pxenv(safe-area-inset-left)的较大值。

总结如下图:

www.2003.com 8

通过媒体查询针对 iPhone X采用个性化样式处理:

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /* iPhone X 独有样式写在这里*/ }

1
2
3
4
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /* iPhone X 独有样式写在这里*/
}
 

先上菜,再唠嗑

先上个二维码:

www.2003.com 9

你可以使用手淘App、优酷APP、各终端自带的浏览器、UC浏览器、QQ浏览器、Safari浏览器和Chrome浏览器扫描上面的二维码,您看到相应的效果:

www.2003.com 10www.2003.com 11

iPhone系列效果

www.2003.com 12

部分Android效果

注:如果扫上面的二维码没有任何效果,你可以点击这里,打开在线页面,重新生成你的设备能识别的二维码号 。

上面的Demo,测试了Top30的机型。目前未得到支持的:

TOP值 品牌 型号 系统版本 分辨率 屏幕尺寸 手淘APP 优酷APP 原生浏览器 QQ浏览器 UC浏览器 Chrome浏览器
13 华为 Mate9 Android7.0 1080 x 1920 5英寸 Yes Yes No Yes Yes Yes
23 华为 Mate7 Android4.2 1080 x 1920 5.2英寸 Yes Yes No Yes Yes Yes
25 魅族 Mx4 (M460 移动4G) Android4.4.2 1152 x 1920 5.36英寸 Yes No No Yes Yes Yes
28 Oppo R7007 Android4.3 1280 x 720 5英寸 Yes No No Yes Yes No
29 三星 N9008 (Galaxy Note3) Android4.4.2 1080 x 1920 5.7英寸 Yes No Yes Yes Yes Yes
30 华硕 ZenFone5(x86) Android4.3 720 x 280 5英寸 No No No Yes No No

Top30机型中不在列表中的,将看到的效果如上图所示。至于敢不敢用,这就得看亲了。必竟第一个吃螃蟹的人是需要一定的勇气!(^_^)

调用viewport-units-buggyfill的方法

同样在HTML文件中调用viewport-units-buggyfill的方法,比如:

JavaScript

<script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); } </script>

1
2
3
4
<script>
window.onload = function () {
    window.viewportUnitsBuggyfill.init({
       hacks: window.viewportUnitsBuggyfillHacks }); } </script>

有关于Viewport Units Buggyfill更多的方法,可以阅读其官网文档。

再聊移动端页面的适配

2017/08/04 · CSS · 页面适配

原文出处: 大漠   

前端圈真乱,这话一点不假。但乱也乱的好处,乱则生变,有变化才有进步。今天还是老调重谈,聊聊移动端页面的适配。因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话,建议你花点时间阅读完下面我扯蛋的东东。

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 } } }

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

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

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

www.2003.com 13

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

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

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

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

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

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

1
2
3
<div aspectratio>
    <div aspectratio-content></div>
</div>

在实际使用的时候,你可以把自定义属性aspectratioaspectratio-content换成相应的类名,比如:

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

1
2
3
<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%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[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:246188是容器宽度,246是容器高度)这样的比例容器,只需要这样使用:

[w-188-246] { aspect-ratio: '188:246'; }

1
2
3
4
[w-188-246] {
    aspect-ratio: '188:246';
}
 

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

<div aspectratio="" w-188-246="" class="color"></div>

1
<div aspectratio="" w-188-246="" class="color"></div>

编译前的CSS如下:

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

1
2
3
4
5
6
[w-188-246] {
    width: 188px;
    background-color: red;
    aspect-ratio: '188:246';
}
 

编译之后:

[w-188-246]:before { padding-top: 130.85106382978725%; }

1
2
3
4
[w-188-246]:before {
    padding-top: 130.85106382978725%;
}
 

主要是因为在插件中做了相应的处理,不在每次调用aspect-ratio时,生成前面指定的默认样式代码,这样代码没那么冗余。所以在使用的时候,需要把widthbackground-color分开来写:

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

1
2
3
4
5
6
7
8
[w-188-246] {
    width: 188px;
    background-color: red;
}
[w-188-246] {
    aspect-ratio: '188:246';
}
 

这个时候,编译出来的CSS就正常了:

[w-188-246] { width: 25.067vw; background-color: red; } [w-188-246]:before { padding-top: 130.85106382978725%; }

1
2
3
4
5
6
7
8
[w-188-246] {
    width: 25.067vw;
    background-color: red;
}
[w-188-246]:before {
    padding-top: 130.85106382978725%;
}
 

这个现象也算是一个天坑吧。而这个坑是该插件自己带来的,上面的处理方式只是治标而不能治本。所以在使用该插件的时候,需要特别注意这个细节。

目前采用PostCSS插件只是一个过渡阶段,在将来我们可以直接在CSS中使用aspect-ratio属性来实现长宽比。当然,如果你对cssnext熟悉的话,可以给其添加这样的一个PR,将CSS原生的aspect-ratio属性添加到cssnext特性当中,这样只要你使用postcss-next就可以忽略这个插件了。

剩下的postcss-px-to-viewportpostcss-viewport-units两个PostCSS插件主要是用于vw适配方案,算是这次项目中必不可少的PostCSS插件。其中,postcss-px-to-viewport插件主要用来把px单位转换为vwvhvmin或者vmax这样的视窗单位,也是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` }

1
2
3
4
5
6
7
8
9
10
"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`
}
 

目前出视觉设计稿,我们都是使用750px宽度的,那么100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程,不需要进行任何的计算,直接在代码中写px,比如:

.test { border: .5px solid black; border-bottom-width: 4px; font-size: 14px; line-height: 20px; position: relative; } [w-188-246] { width: 188px; }

1
2
3
4
5
6
7
8
9
10
11
.test {
    border: .5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}
[w-188-246] {
    width: 188px;
}
 

编译出来的CSS:

.test { border: .5px solid #000; border-bottom-width: .533vw; font-size: 1.867vw; line-height: 2.667vw; position: relative; } [w-188-246] { width: 25.067vw; }

1
2
3
4
5
6
7
8
9
10
11
.test {
    border: .5px solid #000;
    border-bottom-width: .533vw;
    font-size: 1.867vw;
    line-height: 2.667vw;
    position: relative;
}
[w-188-246] {
    width: 25.067vw;
}
 

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

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

1
<div class="box haspx"></div>

写CSS的时候:

.ignore { margin: 10px; background-color: red; } .box { width: 180px; height: 300px; }

1
2
3
4
5
6
7
8
9
.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}
 

编译出来的CSS:

.box { width: 24vw; height: 40vw; } .ignore { margin: 10px; /*.box元素中带有.ignore,在这个类名写的`px`不会被转换*/ background-color: red; }

1
2
3
4
5
6
7
8
9
.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中带有.ignore,在这个类名写的`px`不会被转换*/
    background-color: red;
}
 

上面解决了pxvw的转换计算。

由于浏览器对vw还具有一定的兼容性,其在Android 4.4之下和iOS8以下的版本都存有一定的问题。为了让vwvhvminvmax这些viewport单位能更好的使用。其兼容方案就是使用viewport的polyfill:Viewport Units Buggyfill

而在采用Viewport Units Buggyfill的时候,需要手动给使用viewport单位的样式中添加其对应的Hack代码,比如:

.box { top: 2vw; left: 1vw; content: 'viewport-units-buggyfill;top: 2vw;left: 1vw;'; }

1
2
3
4
5
6
7
.box {
    top: 2vw;
    left: 1vw;
 
    content: 'viewport-units-buggyfill;top: 2vw;left: 1vw;';
}
 

如果每一个都这样来做,那么将是灾难性的。幸运的是,可以使用postcss-viewport-units。其主要是给CSS的属性添加content的属性,配合viewport-units-buggyfill库给vwvhvminvmax做适配的操作。

另一个坑,使用postcss-viewport-units将会给具有content属性的元素造成一定的影响,比如你的项目中使用伪元素::before::after或者伪类:before:after之类。那么使用该插件,会自动替换你原来的content内容,为了避免该现象,需要在content的属性值末尾添加!important

上面这些PostCSS插件是在这次项目中使用的,也将会在后面的项目中继续使用,使用其主要原因是帮助我们解放双手能更好的撸。或许你对其中一些插件有更好的使用心得,欢迎和我们一起分享,如果你有更好的插件,能帮助我们解放双手,也欢迎分享给我们。

解决1px方案

前面提到过,对于1px是不建议将其转换成对应的vw单位的,但在Retina下,我们始终是需要面对如何解决1px的问题。在《再谈Retina下1px的解决方案》文章中提供了多种解决1px的方案。在这里的话,个人推荐另外一种解决1px的方案。依旧是使用PostCSS插件,解决1px可以使用postcss-write-svg

使用postcss-write-svg你可以通过border-image或者background-image两种方式来处理。比如:

@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } } .example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; }

1
2
3
4
5
6
7
8
9
10
11
12
@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

这样PostCSS会自动帮你把CSS编译出来:

.example { border: 1px solid transparent; border-image: url("data:image/svg xml;charset=utf-8,") 2 2 stretch; }

1
2
3
4
.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg xml;charset=utf-8,") 2 2 stretch;
}

使用PostCSS的插件是不是比我们修改图片要来得简单与方便。

上面演示的是使用border-image方式,除此之外还可以使用background-image来实现。比如:

@svg square { @rect { fill: var(--color, black); width: 100%; height: 100%; } } #example { background: white svg(square param(--color #00b1ff)); }

1
2
3
4
5
6
7
8
9
10
11
@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}
 
#example {
    background: white svg(square param(--color #00b1ff));
}

编译出来就是:

#example { background: white url("data:image/svg xml;charset=utf-8,"); }

1
2
3
#example {
    background: white url("data:image/svg xml;charset=utf-8,");
}

这个方案简单易用,是我所需要的。目前测试下来,基本能达到我所需要的需求。但有一点千万别忘了,记得在``中添加:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

1
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

上面阐述的是这个适配方案中所用到的技术点,简单的总结一下:

  • 使用vw来实现页面的适配,并且通过PostCSS的插件postcss-px-to-viewportpx转换成vw。这样的好处是,我们在撸码的时候,不需要进行任何的计算,你只需要根据设计图写px单位
  • 为了更好的实现长宽比,特别是针对于imgvedioiframe元素,通过PostCSS插件postcss-aspect-ratio-mini来实现,在实际使用中,只需要把对应的宽和高写进去即可
  • 为了解决1px的问题,使用PostCSS插件postcss-write-svg,自动生成border-image或者background-image的图片

这里使用了多个PostCSS的插件,其实现在有很多优秀的PostCSS插件能帮助我们解决很多问题。哪果你从未接触过有关于PostCSS相关的知识,建议你可以花点时间去学习一下,在W3cplus提供了一些有关于PostCSS相关的文章。如果你想系统的学习PostCSS相关的知识,推荐你购买《深入PostCSS Web设计》一书:

www.2003.com 14

本文由www.2003.com发布于计算机教程,转载请注明出处:分享手淘过年项目中采用到的前端技术

关键词: