再聊移动端页面的适配,分享手淘过年项目中采
分类:前端技术

再聊移动端页面的适配

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

最早的文章出处: 大漠   

前面一个圈真乱,这话一点不假。但乱也乱的益处,乱则生变,有转变才有升高。今日要么上四调重谈,聊聊移动端页面包车型地铁适配。因为对此生机勃勃枚前端来说,每十19日和页面打交道(H5页面),那么布局的活总是不可缺少,这也将面对区别终端的适配难题。不明白你是否和自身同样,页面布局总是或多或少会有局地蛋疼的工作发生。要是是的话,提出您花点时间读书完上边笔者扯蛋的东东。

再谈 Retina 下 1px 的应用方案

2017/07/25 · CSS · 1px

原来的作品出处: 大漠   

在互联互连网关于于1px边框的解决方案已经有比很多样了,自从使用Flexible库之后,再也从未纠葛有关于1px有关的主题素材。由于近年来在虚构新的活动端适配方案,也等于本末倒置Flexible库,我必须要思量重新处理1px的方案。为此为小编本人也重撸了生机勃勃部分1px的化解方案,整理出来,希望对有须要的同班有救助。

分享手淘过大年项目中采纳到的前端手艺

2018/02/28 · CSS, JavaScript · 1 评论 · 前面一个技巧

初藳出处: 大漠   

当你陪着妻儿老小嗑着瓜子,和妻小手拉手望着春晚,顺便拿起初淘参预春晚抽取奖金互动的时候,底特律还会有两百多程序员还奋战在渺小个中。以后年也过完了,奖也抽了,红包也拿了。也该好好回来专业的时候了。本次很荣幸,自个儿能参加手淘度岁项目(红包开光和春晚互动项目)的项目中,尽管独自插足在那之中的有的专业,但其后觉得有一点东西依旧应当总计总括的,为随后的档期的顺序做计划。那么粗略的来计算一下,笔者要幸而参预项目中用到的生龙活虎对前端技艺。

那一个技术其实也并非何等没有人来拜访的手艺栈,因为那个本事点已经冒出非常久了,只不过我们习贯了和睦的开销形式,加上项目时间紧,怕尝试新的事物。事实上笔者本身也是这么,惊惶使用这几个手艺点,给项目拉动别样的高风险(本来项目时间就很紧),庆幸的是,接下去了到的部分事物,经住了档案的次序的考验,固然当中踩过一些坑,但终究是无惊无险。

茴字的八种写法——浅谈移动前端适配

2018/04/16 · 基础技艺 · 移动端

初藳出处: tomc   

话说自身刚职业的时候,就最早用rem了,过了没多长期,接触到了flexible,系统化且帮忙iOS的retina屏急忙征服了本身,这两天又看见了大漠大神的vw。所以本文想成功风流洒脱篇一整套的小说,可以系统的掌握前端适配的变异。闲话少叙,登时最初。

Flexible承载的重任

Flexible到今天也可以有几年的野史了,解救了无数同室针对于H5页面布局的适配难点。而那套方案也针锋相投来讲是叁个较为成熟的方案。简单的回想一下,当初为了能让页面越来越好的适配各样分裂的极端,通过哈克手腕来遵照设备的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完结等比缩放
  • 使用Hack手段用rem模拟vw特性

关于于Flexible方案达成适配,在二零一四年双十七之后做过这上头的本事文书档案分享,感兴趣的同室可以移动阅读《动用Flexible完成手淘H5页面包车型地铁巅峰适配》一文。尽管Flexible解决了适配终端非常多难点,但它并不是全能的,亦不是最优异的,他要么存在有的题指标,比方iframe的引用,一时候就把大家友好给埋进去了。针对内部的局地白璧微瑕,某些同学对其实行过相关的改建,在网络搜寻能找到有关的方案。

那么时期在变化,前端技巧在不停的转换,试问:Flexible照旧精品方案?Flexible还应该有存在的必备吗? 方今径直在追究那地点,这里先报告咱们Flexible已经做到了他本身的历史职分,大家能够放下Flexible,拥抱新的变化。接下来的从头到尾的经过,作者将享受一下自己近期协调商量的新的适配方案,大概超级多公司同学早就起始利用了,若是有不法则之处,希望能获取大婶们的指正;要是您有更加好的方案,希望能共同享用合作研究。

Flexible方案

Flexible方案已不是什么样秘密的方案了,依赖JavaScript来动态校勘meta标签中viewport中的initial-scale的值,然后依据dpr修改html中的font-size值,再使用rem来拍卖。有关于那方面包车型地铁详尽使用能够翻阅早先时代收拾的作品《运用Flexible达成手淘H5页面的终极适配》。

可是话说回来,那些方案前段时间只管理了iOS的dpr2的情形,其余的都还未有拍卖,也正是说不支持Android和drp=3的事态。对于追求完美的同桌来讲,那是心余力绌经受的。

不寻常,总是有解决方案的,有同学做过地点的详细探求。那么随着其思路也再一次撸了一次。先回到Fleible中,其完毕原理,大家都明白的。让viewport放大为device-widthdpr倍数,然后缩短1/dpr倍显示。

对于viewport的乘除理论上是那样的:

viewportwidth没安装的话,私下认可是980px,那上边的详尽介绍能够阅读《Configuring the Viewport》一文;但假诺设置了initial-scaleviewport=device-width/scale;同一时间还安装了widthinitial-scale,则会取min-width,即采纳那三个十分的小的值。详细的介绍能够阅读《Preliminary meta viewport research》一文。

接下去看看各样设施下的面貌。首先利用JavaScript总括出scale的值:

var scale = 1 / window.devicePixelRation;

1
var scale = 1 / window.devicePixelRation;

head中的meta标签设备:

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

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

iPhone5viewportwidth=640px,得到的meta值:

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

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

相符大家预料所需的结果。

iPhone6 Plus也是一揽子的:

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

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

再来看多少个Android的设施。比如米3,它的dpr=3viewportwidth=1080,得到的值也是大家盼望的:

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

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

在米2中,它的dpr=2viewportwidth=720,效果也是OK的。

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

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

看见此间时,大家兴许都会以为完美,无需郁结啥,事实上在米2和米3中,看见的都以设置默许的浏览器、UC和Chrome浏览器的结果。回过头来再看WebView,那就出难题了。当Webview为360时,线依旧也是粗的,这里测量检验,开采user-scalable=no会使viewport的值等于device-width。那么大家非常去掉user-scalable=no要么设置user-scalable=yes

<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/> <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333"/>

1
2
  <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>
  <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333"/>

那样设置,在iOS、米3的Webview下都能博得预期效益,但是在米第22中学的Webview依然有标题,页面会被推广。难点是出在于米2的Webview的viewportwidth=490px,是由暗许的980px缩放0.5后的值。而米2的device-width=360,所以就能够并发撑开放不下的光景。

米2的Webview如何是好? 想起还大概有个被webkit在2013年1月丢掉的特性target-densitydpi=device-dpi,此属性是以前Android对viewport标签的恢弘,arget-densitydpi的值有: device-dpi, high-dpi, medium-dpi, low-dpi七个。对于一加2的Webview才现身的难点测度只可以非标准的习性来hack试试,densitydpi=device-dpi会让页面遵照设备本人的dpi来渲染。

<meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

1
  <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

测量检验其余都正常,就OPPO2的Webview会现身些微边框不常现身文文莫莫,原本是那个时候页面包车型客车viewport=980,densitydpi=device-dpi以设施实际的dpi显示后,scale的倍数变为360/980,这种场馆压缩下去大概就好像此残了~~

想办法让Nokia2的缩放比为中兴的dprviewport怎样能成为2*360=720呢,试试user-scalable=no再次加回去试试,终于,黑莓2的Webview下冒出了纤弱的线条。

<meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/>

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

测量检验了下对诺基亚种类、Samsung体系、中兴等主流机型的震慑,平常!

别兴奋的太早,在大天朝下,不止有那个设备。还大概有VIVO之类的手提式有线电话机,他们的dpr=3,他们的viewport=980px,减少为原本的1/3后,效果就不是我们所要的了。除此而外,还恐怕有后生可畏对设施,它的dpr很变态,比如VIVO的Android4.1.2,它的dpr=1.5,而其viewport也等于980,裁减为原来的1/1.5 = 2 / 3,宽度就造成了980 * 2 / 3 = 653.333,获得的职能也是爱莫能助全心全意的。当然还应该有大器晚成部分我们所不了然的器械呢?这一个能够由此Device Metrics网址来查阅出设备相关的参数:

图片 1

那也是当初Fleible放任医治Android的原因。

但总的来说,其根本原因是相像的,viewport的暗中同意宽度依旧是980initial-scale等的装置无法更换viewport的准绳总括。看来那些非主流机型上只可以因此width来改动了。情理之中,设置如下即可

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

1
  <meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

尤其测验开采绝超越百分之五十Android机器用上边包车型客车vieport安装也完全能够完结1px的实效。可是新webkit下大器晚成度移除了对target-densitydpi=device-dpi的支撑。所以主流Android还是用标准的装置上述initscale=scale,因而最终的方案是主流的器械安装viewport

<meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

1
  <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

安装以上viewport抑或一点都不大概改观私下认可980为宽度的viewport的肥猪瘤设备(如摩托罗拉,云os等),设置如下:

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

1
  <meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

据此,最终的兑现代码如下:

metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' scale ',maximum-scale=' scale ', minimum-scale=' scale); //不通过投入具体设备的白名单,通过此特征检验 docEl.clientWidth == 980 //initial-scale=1无法省,因为地点安装为其它的scale了,供给重新初始化回来 if(docEl.clientWidth == 980) { metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1'); }

1
2
3
4
5
6
metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' scale ',maximum-scale=' scale ', minimum-scale=' scale);
//不通过加入具体设备的白名单,通过此特征检测 docEl.clientWidth == 980
//initial-scale=1不能省,因为上面设置为其他的scale了,需要重置回来
if(docEl.clientWidth == 980) {
    metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1');
}

调整和降低的代码可以点击这里下载。那么些也能够说是Flexible的提拔版本吧(此外感兴趣的能够看看npm上的postcss-adaptive)。但亦不是自小编所须求的方案,我的终极方案是剖腹藏珠Flexible。

若果您对上边的方案不是很好听,你能够依靠这篇文章《Mobile Web: Logical Pixel vs Physical Pixel》提供的解决方案,收拾出契合本人的方案。原理和近年来介绍的相像。

iPhone系列的viewport

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

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

Android系列的viewport:

<meta name="viewport" content="width=device-width target-densityDpi=device-dpi initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

1
  <meta name="viewport" content="width=device-width target-densityDpi=device-dpi initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

相近为了达到上述的急需,通过JavaScript来管理:

if (window.devicePixelRatio === 1) { if (window.innerWidth === 2 * screen.width || window.innerWidth === 2 * screen.height) { el = document.getElementById('viewport'); el.setAttribute('content', 'width=device-width target-densityDpi=device-dpi ' 'initial-scale=1 maximum-scale=1 user-scalable=no'); document.head.appendChild(el); width = window.innerWidth; height = window.innerHeight; if (width === 2 * screen.width) { width /= 2; height /= 2; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if (window.devicePixelRatio === 1) {
    if (window.innerWidth === 2 * screen.width ||
        window.innerWidth === 2 * screen.height) {
        el = document.getElementById('viewport');
        el.setAttribute('content', 'width=device-width target-densityDpi=device-dpi '
            'initial-scale=1 maximum-scale=1 user-scalable=no');
        document.head.appendChild(el);
        width = window.innerWidth;
        height = window.innerHeight;
        if (width === 2 * screen.width) {
            width /= 2;
            height /= 2;
        }
    }
}

是还是不是感到他们十三分周边。感兴趣不仿试试。

度岁项目

手淘过大年项目,事实上分为多个,个中贰个叫红包开光,另一个是春晚抽取奖品的互动项目。

图片 2

地点两张图分别是红包开光和春晚相互的主分界面视觉图。假诺您参与承办淘过大年互动的移动中,这些界面应该对你来讲并不会太素不相识。

通过协会同学合伙研究,这一次多个项目都基于Vue来开垦,Vue只是二个JavaScript库而以,接受她并不未有太多的首要缘由,而是想让集体在其后的等级次序支付的时候,JavaScript库能趋于统生机勃勃,进而稳步在项目中具备沉淀与积存。基于那么些原因,小编在里面重视做的事体,在此个脚手架中(也等于Vue-cli的底蕴)加多了以下三个部分:

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

1. 什么样是前者适配

从UI表现层面上:
咱俩目的在于分裂尺寸的道具,页面能够自适应的来得要么拓宽等比缩放,进而在差别的尺寸的设备下看起来协和或者差不多

从代码完结层面上:
大家盼望前端适配能够用用尽量从简的代码来达成。最棒生机勃勃套代码兑现包容全部设施,并非对每一个或每一个设备都写风流罗曼蒂克套方案,不是每一遍都采取最无助的方案(Android和iOS分开编写)。

先上菜,再唠嗑

先上个二维码:

图片 3

您能够使用手淘App、优酷应用软件、各终端自带的浏览器、UC浏览器、QQ浏览器、Safari浏览器和Chrome浏览器扫描下面的二维码,您看来相应的效应:

图片 4图片 5

BlackBerry体系效果

图片 6

部分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机型中不在列表中的,将见到的法力如上海教室所示。至于敢不敢用,那就得看亲了。必竟第一个吃淡水蟹的人是内需一定的胆略!(^_^)

.5px方案

二零一四年的WWDC大会中,Ted O’Conor在享用“设计响应的Web体验” 宗旨时涉嫌关于Retina Hairlines生机勃勃词,也正是Retina异常的细的线:

在Retina屏上黄金年代味展现1大要像素的边框,开拓者应该什么管理吧?

其实其想发挥的是iOS8下1px边框的施工方案。1px的边框在devicePixelRatio = 2的Retina屏下会呈现成2px,在One plus6 Plus下以至会显得成3px

幸好,时期总是升高的,在iOS8下,苹果类别都曾经支撑0.5px了,那么意味着在devicePixelRatio = 2时,大家得以注重媒体询问来拍卖:

.border { border: 1px solid black; } @media (-webkit-min-device-pixel-ratio: 2) { .border { border-width: 0.5px } }

1
2
3
4
5
6
7
8
9
.border {
    border: 1px solid black;
}
 
@media (-webkit-min-device-pixel-ratio: 2) {
    .border {
        border-width: 0.5px
    }
}

但在iOS7之下和Android等别的系统里,0.5px将会被出示为0px,那么我们就须求想出方法解决,说其实一点正是找到哈克。

先是我们得以因而JavaScript来推断UA,即使是iOS8 ,则输出类名hairlines,为了以免万黄金年代重绘,把这段代码增多在``之前:

if (/iP(hone|od|ad)/.test(navigator.userAgent)) { var v = (navigator.appVersion).match(/OS (d )_(d )_?(d )?/), version = parseInt(v[1], 10); if(version >= 8){ document.documentElement.classList.add('hairlines') } }

1
2
3
4
5
6
7
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
    var v = (navigator.appVersion).match(/OS (d )_(d )_?(d )?/),
        version = parseInt(v[1], 10);
    if(version >= 8){
        document.documentElement.classList.add('hairlines')
    }
}

除开判读UA之外,还能够透过JavaScript来剖断是还是不是扶助0.5px边框,假诺帮助的话,同样输出类名hairlines

if (window.devicePixelRatio && devicePixelRatio >= 2) { var testElem = document.createElement('div'); testElem.style.border = '.5px solid transparent'; document.body.appendChild(testElem); if (testElem.offsetHeight == 1){ document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(testElem); }

1
2
3
4
5
6
7
8
9
if (window.devicePixelRatio && devicePixelRatio >= 2) {
    var testElem = document.createElement('div');
    testElem.style.border = '.5px solid transparent';
    document.body.appendChild(testElem);
    if (testElem.offsetHeight == 1){
        document.querySelector('html').classList.add('hairlines');
    }
    document.body.removeChild(testElem);
}

对待于第后生可畏种办法,这种方法的可信性越来越高一些,但是供给把JavaScript放在body标签内,相对来说会有部分重绘,个人建议是用第风华正茂种艺术。

本条方案不或许兼容iOS8以下和Android的装置。若是须要完备的相配,能够思量和方案豆蔻梢头结合在一块管理。只是相比较蛋疼。当然除了和Flexible方案组成在联合签字之外,还能杜撰和上面包车型客车方案组合在同盟利用。

PostCSS插件

在竞相脚手架中,前段时间已布置的PostCSS插件首要有:

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

2. 关键字

假定您询问那么些根本字,那么这段大能够跳过,假使前边赶上了难题,认为微微吸引,也可以再再次来到查阅。

适配方案

前方给我们介绍了这么些方案前段时间拿走的支撑意况以致功用。也扯了比超多废话,接下去步向正题吧。

在活动端布局,大家须要面前境遇两极分化首要的标题:

  • 各终端下的适配难题
  • Retina屏的内情管理

不等的终极,大家面前遇到的荧屏分辨率、DP途锐、1px2x图等意气风发多级的标题。那么这几个布局方案也是针对性的缓和那一个难题,只但是消除那一个主题材料不再是使用哈克手腕来拍卖,而是径直行使原生的CSS技术来处理的。

border-image

border-image是三个很奇妙的质量,Web开荒职员依靠border-image的九宫格个性,能够很好的施用到清除1px边框中。使用border-image解决1px咱俩须要五个一定的图纸,那张图片要相符您的需求,可是它长得像下图:图片 7

 

实际应用的时候:

border-width: 0 0 1px 0; border-image: url(linenew.png) 0 0 2 0 stretch;

1
2
border-width: 0 0 1px 0;
border-image: url(linenew.png) 0 0 2 0 stretch;

地点的功用也仅达成了尾部边框border-bottom1px的遵守。之所以采用的图样是2px的高,上一些的1px水彩为透明,下有个别的1px采用的视觉规定的border颜色。但即使大家边框后面部分和顶上部分都亟待border时,需求做一下图片的调解:

图片 8

border-width: 1px 0; border-image: url(linenew.png) 2 0 stretch;

1
2
border-width: 1px 0;
border-image: url(linenew.png) 2 0 stretch;

到近些日子结束,大家已经能在黑莓上显示1px边框的效应。然则我们也意识这样的秘诀在非视网膜荧屏上会现身border不出示的光景。为了清除那一个主题素材,能够依靠媒体询问来管理:

.border-image-1px { border-bottom: 1px solid #666; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .border-image-1px { border-bottom: none; border-width: 0 0 1px 0; border-image: url(../img/linenew.png) 0 0 2 0 stretch; } }

1
2
3
4
5
6
7
8
9
10
.border-image-1px {
    border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-image-1px {
        border-bottom: none;
        border-width: 0 0 1px 0;
        border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    }
}

任凭是只有生机勃勃边的边框(举例示例中的尾巴部分边框),还是前后都有边框,我们都必要对图片做相应的管理,除些之外,如若边框的颜料做了转移,那么也亟需对图片做管理。那样亦非三个很好的减轻方案。

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现在的表征,其会对这几个特色做连锁的包容性处理。其包括的特征首要有:

图片 9

有关于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熟知的话,能够给其丰硕那样的三个P奥德赛,将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'], // 内定不变为视窗单位的类,可以自定义,能够Infiniti加上,指出定义一至四个通用的类名 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插件是在这里次项目中使用的,也将会在后头的门类中三回九转利用,使用其根本原因是扶持我们解放双臂能更加好的撸。或者你对在那之中部分插件有更加好的运用体验,款待和我们风度翩翩并分享,假让你有更加好的插件,能扶助大家解放双手,也款待分享给大家。

2.1 Viewport/视口

浅显的讲,移动器械上的viewport便是器械的荧屏上能用来显示我们的网页的那一块区域[1],但不必然是大家可以知道的区域。具体来讲,分为以下两种。

适配终端

一言九鼎解决的是适配终端。回看一下,早前的Flexible方案是经过JavaScript来模拟vw的特征,那么到今日竣事,vw早就得到了非常多浏览器的支撑,约等于说,能够直接考虑将vw单位选取于大家的适配布局中。

无庸赘述,vw是依靠Viewport视窗的尺寸单位,这里的视窗(Viewport)指的正是浏览器可视化的区域,而这么些可视区域是window.innerWidth/window.innerHeight的高低。用下图轻巧的来表示一下:

图片 10

 

因为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计算。

恐怕用一张图来表示吧,风流倜傥图胜于万语千言:

图片 11

故而在此个方案中勇于的使用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

其余有二个细节须求极其的建议,比方大家有四个如此的两全:

图片 12

万风度翩翩大家间接选择:

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

诸有此类就能够完善的实现长度宽度比的作用。有关于那下面的原理在那不做过多演讲,感兴趣的话能够翻阅在这里早前重新整建的篇章:

  • CSS达成长度宽度比的两种方案
  • 容器长度宽度比
  • Web中怎么样落实驰骋比
  • 完毕精准的流体排版原理

眼下接受PostCSS插件只是二个过渡阶段,在明天大家能够直接在CSS中央银行使aspect-ratio品质来落实长度宽度比。

PostCSS Write SVG

使用border-image老是都要去调动图片,总是须求资本的。基于上述的原因,大家能够依赖PostCSS的插件postcss-write-svg来支援我们。借使您的品种中早就有应用PostCSS,那么只需求在品种中装置那一个插件。然后在您的代码中采取:

@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
13
@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的插件是否比大家修正图片要来得轻易与实惠。

使用PostCSS的postcss-write-svg插件,除了可以动用border-image来实现1px的边框效果之外,还是能够利用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,");
}

本条方案大致易用,是自个儿所必要的。前段时间测量检验下来,基本能达成自小编所急需的须求,在风行的适配方案中,笔者也选择了这么些插件来管理1px边框的难点。

除去网络好朋友还收拾了意气风发部分别的的方案,举例说:background-imagebox-shadowtransform之类的。

其中box-shadow不引入应用,而background-image和上边的PostCSS方案有一点雷同,只可是PostCSS更为有扶助,实在无耐之下,transform和伪成分只怕伪类的优良照旧得以值得意气风发用的。例如:

.hairlines li{ position: relative; border:none; } .hairlines li:after{ content: ''; position: absolute; left: 0; background: #000; width: 100%; height: 1px; transform: scaleY(0.5); transform-origin: 0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}

动用的时候,也亟需组合JavaScript代码,用来剖断是还是不是是Retina屏。当然除了JavaScript来推断之外,你还足以信任媒体询问来拍卖。

vw适配方案

vw适配方案,重假使用来消除移动端布局的难点。事实上,在手淘,以至到前段时间截至都还在利用Flexible的布局方案,用于适配移动端的各个极端。在15年双11后头,写了豆蔻梢头篇《选取Flexible达成手淘H5页面包车型地铁顶点适配》博文,将此方案分享给专门的学业,何况该方案在标准神速的被复用和改换(原理是生龙活虎致的)。

Flexible的相符方案,在至极时期是特别常有力的,想出那些方案的大神让自身敬拜已久。当然,事物是两极的,他十一分刚劲,但他也可以有自身的不足之处,极度是在vw猎取更加的多的支持的时候,作者觉着Flexible应该分离其历史的采取(那是本人要好YY的)。所以在17年年终作者起来在探寻vw在移动端中的使用,经过意气风发段时间的研商和品味,作者写下了《再聊移动端页面包车型客车适配》一文。

使用vw能够观望测量试验用例获得了众多装置的支撑:

图片 13

世家看来不菲,或然会存疑,那么还应该有不辅助的将会是怎么?非常是老董跟自家说,这一次过大年项目大家使用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相称方案管理方式。

2.1.1 Visual Viewport

Visual Viewport: 可以预知视口。即是运动道具上能够被大家看到的部分。宽度在移动端通过window.innerWidth得到(只限移动端,PC上便是是chrome模拟也是有两样的结果)。

图片 14

解决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-viewport把px转换成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设计》一书:

图片 15

总结

甭管是哪个种类方案,对于清除相符的标题,只假如能缓慢解决都是好方案。俗话说:“不管是白猫依然黑猫,能捉到老鼠都是好猫”。上面罗列了累累1px边框的缓和方案,能够说未有最棒的,独有最相符的。我们能够依赖自身的须要来拍卖,个人更提出大家利用PostCSS的插件。能让您省不菲的事体。

图片 16

vw包容方案

一抬手一动脚端应用vw布局,其相称方案就是运用viewport的polyfill:Viewport Units Buggyfill。使用viewport-units-buggyfill入眼分以下几步走:

2.2.2 Layout Viewport

Layout Viewport: 布局视口。

图片 17

只要把PC上的页面放到移动端,以iphone8为例,要是只展现为可以预知视口的上升的幅度(375px),那么页面会被减去的非常窄而展现错乱,所以移动浏览器就调控暗许情形下把viewport设为多个较宽的值,举个例子980px,那样的话纵然是这三个为桌面设计的网址也能在移动浏览器上健康展现了。[1]

而实际,大家经常看不到如上航海用体育场地那样现身横向滚动条的分界面;在手提式无线电话机上访谈页面时,往往是下图的指南:图片 18

那是由于页面body宽度设置了百分之百而并未有一点点名三个切实可行的增长幅度导致的,进而使页面被等比缩放了。由于客商能够缩放,所以还算能健康浏览。

降职管理

最开头波及过,到最近截止,T30的机型中还会有七款机型是不支持vw的适配方案。那么只要事情供给,应该怎么处理呢?有三种情势得以扩充降职管理:

  • CSS Houdini:通过CSS Houdini针对vw做处理,调用CSS Typed OM Level1 提供的CSSUnitValue API。
  • CSS Polyfill:通过相应的Polyfill做相应的管理,这几天本着于vw单位的Polyfill主要有:vminpoly、Viewport Units Buggyfill、vunits.js和Modernizr。个人推举应用Viewport Units Buggyfill

大漠

常用别称“大漠”,W3CPlus开创者,目前上任于手淘。对HTML5、CSS3和Sass等前端脚本语言有不行中肯的认知和增多的施行经验,特别举世瞩目对CSS3的切磋,是境内最初研商和利用CSS3工夫的一群人。CSS3、Sass和Drupal中华夏儿女民共和国布道者。二〇一六年问世《图解CSS3:焦点手艺与案例实战》。

如需转载,烦请注解出处:https://www.w3cplus.com/css/fix-1px-for-retina.html

1 赞 5 收藏 评论

图片 19

引入JavaScript文件

在你的HTML文件,比如index.html中的</head>或&lt;/body&gt;

引进下边包车型大巴JavaScript文件:

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

1
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

2.2.3 Ideal Viewport

Ideal Viewport:理想视口,其实便是道具的可以见到区域,和可知视口风姿罗曼蒂克致。

安装Ideal Viewport的裨益是,只要据守Ideal Viewport来规划样式稿,顾客就绝不能够最完备的查阅网址的内容——既不用左右滑行,也不用放大收缩。

安装能够视口:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

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

这段代码的乐趣是将布局视口的幅度设置为道具宽度,开首缩放比例为1,最大缩放比例为1,顾客不能够缩放。

Viewport美中不足

采用vw来做适配管理并非独有益处没有别的毛病。有局地细节之处依然存在必然的老毛病的。比如当容器使用vw单位,margin采用px单位时,非常轻松导致全部小幅当先100vw,进而影响布局成效。对于临近那样的情况,大家得以应用连锁的本领实行隐匿。比方将margin换成padding,并且卓殊box-sizing。只不过这不是拔尖方案,随着以后浏览器依旧采取本身的Webview对calc()函数的支持之后,碰到vwpx错落使用的时候,能够组成calc()函数一齐行使,那样就能够周到的解除。

除此以外一些,px转换成vw单位,多少还恐怕会设有一定的像素差,究竟比相当多时候无法完全整除。

到前段时间截止,小编发觉的七个白玉微瑕。可能在背后的运用在那之中,还有可能会凌驾一些别样不为人之的坑。事实也是如此,不管任何方案,踩得坑更加多,该方案也越压实大。希望喜欢那么些适配方案的同窗和自家一块踩坑,让其越发周密。

调用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更加的多的情势,能够翻阅其官方网站文书档案。

2.2 像素

什么剖断本身的接受是或不是援救

纵然该文的示范,进行了多地方的测验。但过多同桌依然会顾虑自身的应用软件应用是还是不是扶助该方案,而不敢大胆尝试或许应用。其实不须要那样担忧,你能够拿本身的器械,也许采纳扫描上边的二维码:

图片 20

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

图片 21

如果vw栏是黄绿代表你的配备或行使支撑该方案;反之则不扶持。此外你也足以时一时关心css3test连锁的换代,前面将会根据有关的规范创新测量试验代码,让你能快捷调整怎样属性能够大胆运用。

Flexible项目无缝过渡到vw

在前面发表的博客当中,有同学关系一个主题素材,怎样能快速的将利用Flexible布局的品种无缝过渡到vw布局,恰巧借此次项指标机遇做了多个小测量检验。完成那么些也并不复杂。一句话来叙述一下其经过:

2.2.1 物理像素

物理像素:三个概况像素是显示屏(手提式有线电话机荧屏)上一丝一毫的大要显示单元,在操作系统的调节下,每种装置像素皆有和好的颜色值和亮度值。[2]

总结

H5页面包车型地铁适配方案总是令人蛋疼的,事实上页面包车型大巴布局连连令人蛋疼的。但本领是延绵不断推陈布新的,大家能够趁机保持对新技艺的爱戴,尝试那一个新特点应用到实际项目中,只犹如此,大家消除难点的方案才会进一步周密。

到写这篇散文结束,即便还大概有那么风流浪漫六款机型不辅助vw,但并不影响大家去选用。只一时时处处去尝尝,才会有进步。在这里,希望我们勇于尝试,一齐让该方案变得更周详。倘令你有更加好的建议,或许你踩到任何坑,迎接在底下的评说中与自己享受,只怕发邮件给本身一块儿座谈。

1 赞 3 收藏 评论

图片 22

第一步

将Flexible项目中的flexible.jsflexible.css去除,并采纳上边包车型地铁vw的格外脚本:

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

1
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

2.2.2 设备独立像素

道具独立像素:又称作CSS像素,就是我们管见所及代码中采纳的像素。浏览器内的漫天长度皆以以CSS像素为单位的,CSS像素的单位是px。

第二步

在<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">

为了合作一加X的适配,在meta标签中加多了viewport-fit="cover"参数管理。有关于那上面的可以翻阅《黑莓X的缺口和CSS》和《iPhone X的Web设计》。

2.2.3 设备像素比

器材像素比(简单的称呼dpr)定义了物理像素和设备独立像素的相应关系。举个例子说对于iOS的retina屏,八个装置独立像素就对应着4个概略像素。那样的陈设性可以使画面尤其分CIMA利,如下图:
图片 23

第三步

加上前方提到的PostCSS插件的配置,当然,你能够只增加拍卖pxvwvw配合Viewport Units Buggyfill的两个PostCSS插件:postcss-px-to-viewportpostcss-viewport-units

PostCSS插件配置有四个精锐的地方,不管您使用的是如何脚手架,他的配备都非常的灵敏,辅助流行的布置工具,比如Webpack,gulp等。所以您不用顾虑倒霉布置。因为在运用Flexible时,也亟需px2rem的PostCSS插件配置。

3. 产业界的施工方案

OK,LongLongAgo的前缀之后,终于到了核心。回到大家最开始的初志:我们只是想要通过豆蔻梢头套代码,实现贰个得以在分化页面尺寸上海展览中心示大致的页面。在此一块,今后任重(Ren Zhong)而道远有三种方案。

第四步

再度编写翻译你的代码,并在浏览器中证美素佳儿(Friso)下编写翻译后的页面。为何要那样做呢?主借使因为postcss-px-to-viewportpostcss-viewport-units三个插件会对::before(:before)、::after(:after)、img中的content做覆盖。假设您的类型中有采纳到具备content属性的成分,必要做鲜明的清监护人业。方今这有个别未有较好的方法,小编也问问过那六个插件的审核人,他们举报也没找到越来越好的方案,只好人肉管理,可能变相不应用::before::after这般的东东,增加额外的因素标签来代替。如若你品尝之后,开掘成越来越好的方案,款待把您的方案分享给大家。

3.1 Rem的缓和方案

DP哈弗后生可畏致时,px在差异的荧屏尺寸上博览会示为定宽,那就变成我们的页面恐怕汇合世滚动条或许占不满的景观。而因而rem来设置div的宽高,能够保障页面可以通过调解html的font-size来整体放大或许降低,进而达成不管荧屏宽度是多少,页面都能圆满显示的功力。

例如,针对750*1334的设计稿:

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"> <script> document.documentElement.style.fontSize = window.innerWidth / 7.5 'px'; </script>

1
2
3
4
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 'px';
</script>

那样,全数的器材的小幅都是7.5rem,只需求把设计稿上的px值统后生可畏除以100,就可以取得相应的rem值了。

果壳网也选用的这种形式。

iPhone X 适配

从今苹果出了NokiaX的设施,对于前端开垦的同窗来说,幸免不了对其适配管理。何况这意气风发部分适配的管理相对来讲是相比较繁锁的。笔者也直接在索求从两全开端就会逃脱一些好端端的适配难题。那有的内容正在收拾,当其早熟之后再与我们享受。上边轻易的陈列一下协调对索尼爱立信X适配的拍卖思路。

苹果对此MotorolaX上H5页面的适配,提供了出格性质扶持,满含meta标签的viewport属性值中参与viewport-fit和加入constant(safe-area-inset-*)env(safe-area-inset-*) ,那些属性是与iOS11之上的保有索尼爱立信机型(不止囊括BlackBerryX)都皮之不存毛将焉附的,故以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)的异常的大值。

总结如下图:

图片 24

由此媒体询问针对 HTC X接收性子化样式处理:

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /* One plus X 唯有样式写在此*/ }

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

3.2 Flexible.js

Flexible是Ali团队开支的前端适配方案,也是用的rem的点子。那么首先种方法其实早就会消除前端适配难点了,为何Ali还要开荒叁个Flexible呢?

在首先种方法中,dpr=1风尚无其它难点,但是在dpr=2大概更加高的无绳电话机显示屏上,因为物理像素的加码,存在小于1px的显示空间。倘若采取第生机勃勃种方法,因为它统生龙活虎对scale设置为1,那么大家只要想要达成0.5px, 就只好通过transform的措施。如若有三个那样的体裁,代码就能够变得很辛劳。

.scale{ position: relative; } .scale:after{ content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid #ddd; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ddd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

故此,Ali的flexible方案丰硕考虑了这种场馆,动态的设置了fontsize和scale, 进而使得CSS中的1px约等于物理像素中的1px,在IOS下获得最清楚的感受。

if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var is苹果手提式有线话机 = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (is苹果手提式有线电话机) { // iOS下,对于2和3的屏,用2倍的方案,其他的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其余设备下,照旧采纳1倍的方案 dpr = 1; } scale = 1 / dpr; } 最终在iphone8下页面包车型大巴header被装置为: <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下,仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}
 
最终在iphone8下页面的header被设置为:
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

现实的豪门能够看《应用Flexible达成手淘H5页面包车型客车顶峰适配》

除此以外索要提议的某个是:Flexible将页面分成了100份,页面包车型大巴上涨的幅度是10rem,对于750的设计稿,大家要求用相应的px数除以75来赢得。手动总括是垂体瘤的,不一致的编写翻译器都可以下载pix2rem插件(能够一向写px然后活动调换为相应的rem值),直接动用sass大概postcss打包也能完毕平等的法力。

小结一下上边三种rem方法,首要思想为:

  • 依据dpr的值来改革html的font-size,从而接纳rem达成等比缩放
  • 依靠dpr的值来修改viewport达成1px的线

而是Flexible也可以有它的局限性,具体表现为:

  • 不能够与响应式布局宽容
  • 对Android未有做处理,导致1px和backgroudImage还要额外做拍卖的难点[4]

所以大家有了第两种缓和方案——vw。

总结

末尾谢谢您花时间把那篇文章阅读完。上边介绍的内容就是本人要幸而手淘度岁项目中央银行使到的风姿洒脱部分前端本领,稍作整理与大家分享。假如中间有不法则之处,烦请路过的大婶斧正。要是您在团结的门类旅长接受上述提到的部分手艺方案,踩到任何坑也招待一齐斟酌。

1 赞 4 收藏 1 评论

图片 25

3.3 vw

vw是基于Viewport视窗的长短单位,在CSS3春季Viewport相关的单位有七个,分别为vw、vh、vmin和vmax。

  • vw: 是Viewport’s width的简写,1vw等于window.innerWidth的1%
  • vh:和vw类似,是Viewport’s height的简写,1vh等于window.innerHeihgt的1%
  • vmin: vmin的值是当下vw和vh中比较小的值
  • vmax: vmax的值是前段时间vw和vh中相当的大的值

实际上vw的方案的写法和flexible方案的写法生龙活虎致——因为flexible其实正是用hack的手段模拟了vw的落到实处而已。

实际写法:针对750px的设计稿,将相应的px值除以75便是vw的值。

因为此措施不会转移可知视口的升幅,所以能够和media query通用了,此外,也扶助了Android上高分辨率屏的展现。

尽管在少数Android机型上还留存包容难点,大家也足以行使Viewport Units Buggyfill,具体见《怎么样在Vue项目中使用vw达成活动端适配》

总结

正如大漠所说,flexible模拟vw的时日已经一病不起,真正的酋长vw已经重临

参照文档:

  1. 《移动前端开荒之viewport的入木四分掌握》
  2. 《挪动端高清、多屏适配方案》
  3. 《再聊移动端页面的适配》
  4. 《依据天猫弹性布局方案lib-flexible的难点研讨》
  5. 《如何在Vue项目中央银行使vw完毕活动端适配》

    1 赞 收藏 评论

图片 26

本文由pc28.am发布于前端技术,转载请注明出处:再聊移动端页面的适配,分享手淘过年项目中采

上一篇:三角形等,CSS之纯CSS画的主干图形 下一篇:没有了
猜你喜欢
热门排行
精彩图文