这篇博文不讲概念,基本上是学习了网上文章后的最佳实践
问题
- 设计师给你一张视觉稿,要怎么样做到移动端设备适配呢?
准备材料
- 淘宝无线前端 lib-flexible
- 让设计师准备两份切图@2x @3x
步骤
删除常规的移动端 meta 标签(重要)
1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">著作权归作者所有。
加上 flexbible meta 标签(可选)
1
<meta content="maximum-dpr=2" name="flexible" />
引用 cdn 地址,插入到 head 中
1
2
3
4<head>
...
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
</head>把视觉稿中的px转换成rem
工作中我们常见的视觉稿大小大至可为640、750、1125三种。不过flexible.js并没有限制只能用这三种,所以你还可以根据自身情况来调整,具体如何转换,我们以视觉稿为640px的宽来举例子,把640px分为100份,每一份称为一个单位a,那么每个a就是6.4px,而1rem单位被认定为10a,此时,1rem=1(a)X10X6.4(px)即64px。1
2
3640px/100=6.4px 1个单位a为6.4px
1rem = 10a 1rem单位被认定为10a
1rem = 1(a)*10*6.4(px) = 64px
因此,对于视觉稿上的元素的尺寸换算,只需要原始px值除以rem基准px值(此例子中为64px)即可。例如240px 120px的元素,最后转换为3.75rem 1.875rem。
- 内容字体不要使用 rem
工作中做完一个触屏版的页面后,我们会拿iPhone5s、iPhone6、iPhone6s等手机进行测试,他们都是Retina屏,我们当然希望在这些手机型号上看到的文本字号是相同的。也就是说,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本(例如iPhone7、iPhone7Plus)。另外,现在绝大多数的字体文件都自带一些点阵尺寸,通常是16px和24px,都是偶数,所以我们不希望出现13px和15px这样的奇葩尺寸。
如此一来,就决定了在制作H5的页面中,rem并不适合用到段落文本上。所以在Flexible整个适配方案中,考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。1
2
3
4
5
6
7
8
9
10
11div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
为了能更好的利于开发,在实际开发中,我们可以定制一个font-dpr()这样的Sass混合宏:1
2
3
4
5
6
7
8
9
10
11@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
有了这样的混合宏之后,在开发中可以直接这样使用:1
@include font-dpr(16px);
- Retina 屏幕下图片模糊处理
准备两份切图
1)在devicePixelRatio<=2时,图片统一使用750设计稿的切图
2)在devicePixelRatio>=2时,图片统一使用750*1.5=1125,也就是所谓@3x设计稿的切图。
借助html元素的data-dpr属性,可以轻松实现另一种媒介查询,以便在devicePixelRatio>=2的时候启用@3x下的图片:1
2
3
4
5
6.avatar {
background-image: url("../img/@2x/merzoo.png?v=@@version");
[data-dpr="3"] & {
background-image: url("../img/@3x/merzoo.png?v=@@version");
}
}
当然,也可以使用一些插件进行自动替换
- 解决 retina 屏下 border: 1px 问题
设计师想要的retina下border: 1px;,其实就是1物理像素宽。而对于css而言,可以认为是border: 0.5px;,这是retina下(dpr=2)下能显示的最小单位。然而,无奈并不是所有手机浏览器都能识别border: 0.5px;,ios7以下,android等其他系统里,0.5px会被当成为0px处理,那么如何实现这0.5px呢?最简单的一个做法就是这样(元素scale):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;
}