您的位置:时时app平台注册网站 > web前端 > 再谈 Retina 下 1px 的实施方案

再谈 Retina 下 1px 的实施方案

2019-10-12 18:45

先上菜,再唠嗑

先上个二维码:

图片 1

您能够应用手淘App、优酷APP、各终端自带的浏览器、UC浏览器、QQ浏览器、Safari浏览器和Chrome浏览器扫描下面的二维码,您收六柱预测应的职能:

图片 2图片 3

小米类别效果

图片 4

部分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机型中不在列表中的,将看见的作用如上海体育场合所示。至于敢不敢用,那就得看亲了。必竟第三个吃螯毛蟹的人是急需一定的胆略!(^_^)

大漠

常用外号“大漠”,W3CPlus创始人,近些日子下车于手淘。对HTML5、CSS3和Sass等前端脚本语言有不行浓重的认知和丰裕的实行经验,特别引人注目对CSS3的探讨,是境内最先研讨和应用CSS3才具的一堆人。CSS3、Sass和Drupal中中原人民共和国布道者。二〇一六年问世《图解CSS3:大旨技术与案例实战》。

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

1 赞 5 收藏 评论

图片 5

引入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>

适配终端

根本消除的是适配终端。回看一下,以前的Flexible方案是经过JavaScript来模拟vw的风味,那么到前几日甘休,vw已经得到了过多浏览器的支撑,也正是说,能够一向考虑将vw单位利用于大家的适配布局中。

旗帜鲜明,vw是凭仗Viewport视窗的尺寸单位,这里的视窗(Viewport)指的就是浏览器可视化的区域,而这几个可视区域是window.innerWidth/window.innerHeight的深浅。用下图轻巧的来表示一下:

图片 6

 

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

要么用一张图来表示吧,一图胜于万语千言:

图片 7

于是在此个方案中好汉的采纳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

除此以外有一个细节供给专门的建议,比如大家有二个这么的安插性:

图片 8

比如大家一向利用:

[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天性来贯彻长度宽度比。

border-image

border-image是一个很玄妙的质量,Web开辟职员依附border-image的九宫格性格,能够很好的使用到解决1px边框中。使用border-image解决1px咱俩须要四个一定的图纸,那张图片要符合您的须求,可是它长得像下图:图片 9

 

事实上应用的时候:

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时,供给做一下图纸的调动:

图片 10

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

甭管是唯有一边的边框(举个例子示例中的尾部边框),依然前后都有边框,我们都亟需对图纸做相应的处理,除些之外,即便边框的颜料做了变化,那么也亟需对图纸做管理。那样亦非二个很好的减轻方案。

第二步

在<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设计》。

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方案完结适配,在2014年双十一现在做过那方面包车型大巴本领文书档案分享,感兴趣的同窗能够运动阅读《使用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下都能博得预期效果与利益,不过在米2中的Webview依旧有标题,页面会被推广。难点是出在于米2的Webview的viewportwidth=490px,是由默许的980px缩放0.5后的值。而米2的device-width=360,所以就能现出撑开放不下的光景。

米2的Webview怎么做? 想起还也是有个被webkit在2012年3月扬弃的品质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"/>

测量试验其余都健康,就Samsung2的Webview会出现略微边框偶然出现若隐若现,原本是此时页面包车型大巴viewport=980,densitydpi=device-dpi以设施实际的dpi显示后,scale的翻番变为360/980,这种状态压缩下去可能就那样残了~~

想艺术让Moto西野七濑2的缩放比为Samsung的dprviewport什么样能形成2*360=720呢,试试user-scalable=no重复加回去试试,终于,HUAWEI2的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网址来查看出设备相关的参数:

图片 11

那也是当初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的肥猪流设备(如Samsung,云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;
        }
    }
}

是否深感他们充裕附近。感兴趣不仿试试。

度岁项目

手淘度岁项目,事实上分为五个,在那之中二个叫红包开光,另一个是春晚抽取奖金的互动项目。

图片 12

地点两张图分别是红包开光和春晚相互的主分界面视觉图。若是您出席承办淘度岁互动的移位中,那多少个分界面应该对你来讲并不会太不熟悉。

由此集体育高校友一起商讨,此番多少个种类都依照Vue来开垦,Vue只是一个JavaScript库而以,选用她并不未有太多的主要性原因,而是想让组织在随后的门类开销的时候,JavaScript库能趋于统一,从而逐步在类型中全数沉淀与储存。基于那么些缘故,小编在里头第一做的事情,在这里个脚手架中(也即是Vue-cli的基本功)增加了以下七个部分:

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

适配方案

前边给我们介绍了那一个方案如今取得的扶持情状以致作用。也扯了不菲废话,接下去步入正题吧。

在移动端布局,大家要求直面七个非常重大的难题:

  • 各终端下的适配难题
  • Retina屏的细节管理

昨今不一样的终极,大家面临的显示屏分辨率、DPENCORE、1px2x图等一密密麻麻的主题材料。那么这么些布局方案也是对准的缓和这么些难题,只然则化解这个难点不再是行使哈克花招来管理,而是径直行使原生的CSS本事来拍卖的。

总结

任由是哪一种方案,对于化解同样的主题素材,只假若能解决都是好方案。俗话说:“不管是白猫还是黑猫,能捉到老鼠都是好猫”。下边罗列了成都百货上千1px边框的消除方案,能够说并未有最佳的,独有最符合的。我们能够依照本人的须求来拍卖,个人更建议大家利用PostCSS的插件。能让你省不菲的作业。

图片 13

第三步

累积眼下提到的PostCSS插件的计划,当然,你能够只增加拍卖pxvwvw配合Viewport Units Buggyfill的两个PostCSS插件:postcss-px-to-viewportpostcss-viewport-units

PostCSS插件配置有四个精锐之处,不管您选择的是怎么着脚手架,他的陈设都充足的利落,扶植流行的布局工具,比方Webpack,gulp等。所以你不要顾忌不好布置。因为在应用Flexible时,也必要px2rem的PostCSS插件配置。

哪些判别本人的行使是还是不是扶持

就算如此该文的演示,举办了多地方的测量试验。但众多校友依旧会忧郁本人的APP应用是不是扶助该方案,而不敢大胆尝试或许应用。其实不要求这么顾忌,你能够拿本人的配备,大概利用扫描下边的二维码:

图片 14

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

图片 15

如果vw栏是铅色代表你的设备或应用支撑该方案;反之则不扶植。其余你也足以常常关心css3test相关的更新,后边将会依照有关的正统革新测量试验代码,让你能火速通晓怎么样属性能够大胆利用。

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布局,其相称方案正是运用viewport的polyfill:Viewport Units Buggyfill。使用viewport-units-buggyfill最重要分以下几步走:

降职管理

最先始波及过,到近些日子结束,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

再谈 Retina 下 1px 的施工方案

2017/07/25 · CSS · 1px

原稿出处: 大漠   

在网络络关于于1px边框的技术方案已经有很两种了,自从使用Flexible库之后,再也从未纠缠有关于1px连锁的难点。由于近年来在设想新的活动端适配方案,也正是吐弃Flexible库,笔者只能考虑重新管理1px的方案。为此为笔者要好也重撸了有的1px的建设方案,整理出来,希望对有亟待的同窗有扶植。

调用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越来越多的措施,能够翻阅其官方网站文书档案。

Viewport不足之处

采用vw来做适配管理并非独有补益未有其余缺欠。有部分细节之处如故存在一定的缺欠的。比方当容器使用vw单位,margin采用px单位时,很轻易导致全体急剧超越100vw,从而影响布局成效。对于周边那样的光景,大家得以选取连锁的手艺进行规避。比如将margin换成padding,况且合作box-sizing。只然则那不是精品方案,随着未来浏览器依然使用自个儿的Webview对calc()函数的协助之后,遇到vwpx混合使用的时候,能够结合calc()函数一齐利用,那样就足以健全的减轻。

其余一些,px转换成vw单位,多少还恐怕会存在必然的像素差,究竟非常多时候不恐怕完全整除。

到近日结束,笔者发觉的四个不足之处。恐怕在后边的运用当中,还可能会境遇一些别样不为人之的坑。事实也是那般,不管任何方案,踩得坑更多,该方案也更是强盛。希望喜欢那一个适配方案的同窗和自家一块踩坑,让其越发全面。

.5px方案

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

在Retina屏上唯有展现1概略像素的边框,开拓者应该如哪个地区理啊?

其实其想表达的是iOS8下1px边框的施工方案。1px的边框在devicePixelRatio = 2的Retina屏下会呈现成2px,在红米6 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方案组成在同步之外,还是能虚拟和下边包车型地铁方案组合在联合签名利用。

vw适配方案

vw适配方案,首要是用以化解移动端布局的问题。事实上,在手淘,以至到近来停止都还在应用Flexible的布局方案,用于适配移动端的种种极端。在15年双11过后,写了一篇《动用Flexible完结手淘H5页面包车型客车巅峰适配》博文,将此方案分享给职业,而且该方案在正式火速的被复用和修改(原理是千篇一律的)。

Flexible的符合方案,在特别时期是相当有力的,想出那几个方案的大神让自个儿敬拜已久。当然,事物是两极的,他百般苍劲,但她也可能有和好的不足之处,非常是在vw获得更加多的支撑的时候,作者感到Flexible应该剥离其历史的利用(那是自己要好YY的)。所以在17年年终作者起来在追究vw在活动端中的使用,经过一段时间的研究和品尝,笔者写下了《再聊移动端页面包车型客车适配》一文。

使用vw能够看看测量检验用例获得了数不完配备的支撑:

图片 16

世家收看多数,也许会质疑,那么还会有不帮衬的将会是怎么?特别是COO娘跟本人说,此次度岁项目我们使用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相当方案管理方式。

再聊移动端页面包车型地铁适配

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

原稿出处: 大漠   

前面二个圈真乱,那话一点不假。但乱也乱的功利,乱则生变,有浮动才有进步。昨日或然定县弦子腔重谈,聊聊移动端页面包车型客车适配。因为对于一枚前端来说,每18日和页面打交道(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今后的风味,其会对这个特色做连锁的宽容性管理。其包罗的性状首要有:

图片 17

有关于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宝马X3,将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单位的样式中增添其对应的哈克代码,比方:

.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再谈 Retina 下 1px 的实施方案。、: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-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设计》一书:

图片 18

分享手淘过年项目中采纳到的前端本事

2018/02/28 · CSS, JavaScript · 1 评论 · 前面叁个技艺

初藳出处: 大漠   

当你陪着亲朋好朋友嗑着瓜子,和亲属手拉手望着春晚,顺便拿起始淘出席春晚抽取奖金互动的时候,德班还会有两百多程序员还奋战在微小当中。今后年也过完了,奖也抽了,红包也拿了。也该杰出回来专门的工作的时候了。此番很光荣,自个儿能插手手淘过大年项目(红包开光和春晚互动项目)的项目中,即便只是参加其间的有的专门的学业,但随后以为微微东西照旧应当总计总括的,为未来的档期的顺序做图谋。那么简单的来总括一下,小编自个儿在插足项目中用到的一对前端才能。

那个技巧其实也并非怎样鲜为人知的手艺栈,因为那个技巧点已经面世十分久了,只可是我们习于旧贯了团结的费用形式,加上项目时间紧,怕尝试新的东西。事实上笔者本人也是那般,惊愕使用这一个技巧点,给项目带动此外的高风险(本来项目时间就很紧),庆幸的是,接下去了到的一对事物,经住了品种的考验,虽然个中踩过部分坑,但终于是无惊无险。

总结

H5页面包车型客车适配方案总是令人蛋疼的,事实上页面包车型地铁布局连连让人蛋疼的。但技能是不断更改的,大家得以随着保持对新本领的酷爱,尝试这几个新脾气应用到实在项目中,唯有那样,大家缓慢解决难题的方案才会更加的健全。

到写这篇著作甘休,即便还会有那么一五款机型不扶植vw,但并不影响大家去选取。独有无时不刻去尝尝,才会有升高。在那,希望我们勇于尝试,一同让该方案变得更完美。借使您有更加好的提出,或然你踩到任何坑,款待在底下的评说中与自家分享,也许发邮件给自身一块儿探究。

1 赞 3 收藏 评论

图片 19

总结

末尾多谢您花时间把那篇作品阅读完。上边介绍的内容便是本人要幸而手淘度岁项目中运用到的一部分前端技能,稍作整理与我们分享。要是中间有畸形之处,烦请路过的大婶斧正。倘诺您在和煦的门类准将采用上述提到的部分施工方案,踩到任何坑也迎接一同斟酌。

1 赞 4 收藏 1 评论

图片 20

Flexible项目无缝过渡到vw

在面前发表的博客此中,有同学关系二个标题,如何能快速的将应用Flexible布局的项目无缝过渡到vw布局,刚好借此番项目标机遇做了三个小测量试验。完成这几个也并不复杂。简单的陈说一下其进程:

PostCSS插件

在互动脚手架中,最近已安顿的PostCSS插件首要有:

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

iPhone X 适配

自打苹果出了红米X的道具,对于前端开拓的同校来说,制止不了对其适配管理。何况那部分适配的拍卖相对来说是较为繁锁的。笔者也平昔在找寻从统一筹算开端就能够回避一些健康的适配难题。这一部分故事情节正在整理,当其早熟现在再与大家分享。上面轻松的罗列一下要好对华为X适配的管理思路。

苹果对于诺基亚X上H5页面包车型地铁适配,提供了万分质量帮助,包括meta标签的viewport属性值中参预viewport-fit和加入constant(safe-area-inset-*)env(safe-area-inset-*) ,那几个属性是与iOS11上述的富有OPPO机型(不仅囊括金立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)的一点都不小值。

小结如下图:

图片 21

经过媒体询问针对 黑莓 X选用特性化样式处理:

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /* 三星 X 只有样式写在那*/ }

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

第一步

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

第四步

重新编写翻译你的代码,并在浏览器中证实一下编译后的页面。为何要这么做吧?重借使因为postcss-px-to-viewportpostcss-viewport-units七个插件会对::before(:before)、::after(:after)、img中的content做覆盖。假诺您的种类中有使用到持有content质量的成分,须要做明确的清理专业。如今那某些并未有较好的方法,小编也问问过那七个插件的撰稿人,他们举报也没找到越来越好的方案,只好人肉管理,或许变相不使用::before::after像这种类型的东东,增添额外的成分标签来替代。如若您品尝之后,发掘有越来越好的方案,款待把您的方案分享给大家。

本文由时时app平台注册网站发布于web前端,转载请注明出处:再谈 Retina 下 1px 的实施方案

关键词: