Day05-flexible.js

别说谁变了你拦得住时间么 提交于 2020-03-28 10:49:55

今天是来到新公司的第五天,开始看手中的项目,做的东西是类似网易一元购这样的产品,有安卓ios平台还有H5网站,总共三个渠道。首先代码里,头部head引入的flexible.js。(ps:感觉是什么鬼,不晓得是干嘛的。作为一个工作快一年的半的前端小白,除了做过响应式页面,还没做过真正的移动H5页面,表示很焦灼2333333。)ok,废话不多说,let's get into the business。

比如今天接到一个ui妹子的一张设计图,对于手机尺寸的各种规范我也不是很清楚。一般据我所知,宽一般是750px的。如何进行切片以及编写css呢?具体详情可以访问(http://www.jb51.net/article/7...,以下内容由此处转载)。iphone6宽是375pt,由于retina屏,所以切片和平时web端切片不太一样。

解决retina屏问题的可行方案是(以750px*1334px的设计稿为例):

1)在devicePixelRatio<=2时,图片统一使用750设计稿的切图

2)在devicePixelRatio>=2时,图片统一使用750*1.5=1125,也就是所谓@3x设计稿的切图。

把美工按照750*1334的设计稿下的切图都放在img/@2x 这个文件夹下。

然后让美工把750的设计稿矢量放大1.5倍,再按照同样的切图要求提供@3x的切图,并放在了img/@3x 这个文件夹下:

使用了这个js之后,就不要写

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

交给flexible.js自动处理。


编写CSS的基本要求:

1)除font-size外,其它大小都根据750标注稿的尺寸,转换成rem单位的值,转换方法为:标注稿尺寸 / 标注稿基准字体大小;

2)标注稿基准字体大小 = 标注稿宽度 / 10,如标注稿宽为750,标注稿基准字体大小为75;标注稿宽为640,标注稿基准字体大小为64;(所以淘宝这个方案是可以在任意设计稿尺寸下使用的)

3)如果需要设置font-size,可跟据html的data-dpr属性来处理,类似下面的写法:

[data-dpr="2"] p {   font-size: 16px; }  

[data-dpr="3"] p {   font-size: 24px; } 
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!