Day05-flexible.js

HtmlCssJs 发布于2019-08-30 13:08 / 1065人阅读

摘要：今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓平台还有网站，总共三个渠道。解决屏问题的可行方案是以的设计稿为例在时，图片统一使用设计稿的切图在时，图片统一使用，也就是所谓设计稿的切图。

今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓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之后，就不要写

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

云服务器服务器托管 day DAY44 python day day1

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115332.html

Day05-flexible.js

摘要：今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓平台还有网站，总共三个渠道。解决屏问题的可行方案是以的设计稿为例在时，图片统一使用设计稿的切图在时，图片统一使用，也就是所谓设计稿的切图。今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓ios平台还有H5网站，总共三个渠道。首先代码里，头部head引入的flex...

sshe 2019-08-05 10:23 评论0 收藏0
Day05-flexible.js

摘要：今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓平台还有网站，总共三个渠道。解决屏问题的可行方案是以的设计稿为例在时，图片统一使用设计稿的切图在时，图片统一使用，也就是所谓设计稿的切图。今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓ios平台还有H5网站，总共三个渠道。首先代码里，头部head引入的flex...

LiuRhoRamen 2019-08-01 15:57 评论0 收藏0
JavaScript 30 - 一起做一次了不起的挑战

摘要：加入我们，一起挑战吧扫码申请加入全栈部落 JavaScript 30 - 一起做一次了不起的挑战 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑...

1treeS 2019-08-20 18:11 评论0 收藏0
Linux云计算高端架构师+DevOps高级虚拟化高级进阶视频

摘要：课程大纲开班典礼开班典礼开班典礼操作系统系统安装及启动流程操作系统系统安装及启动流程必备命令讲解必备命令讲解必备命令讲解及系统启动流程必备命令讲解及系统启动流程启动流程和用户及用户组讲解启动流程和用户及用户组讲解用户权限讲解及编辑器用户权限课程大纲1.开班典礼(1)_rec.mp42.开班典礼(2)_rec.mp43.开班典礼(3)_rec.flv4.Linux操作系统系统安装及启动...

Cheng_Gang 2019-08-27 14:19 评论0 收藏0
js获取当前时间(昨天、今天、明天)

摘要：更新今天又发现了一种简单的方法可以直接对年月日时分秒进行操作，假如今天那么所得昨天为昨天的时间前天的时间其中，函数为扩展函数。 1、时间格式化 1 //昨天的时间 2 var day1 = new Date(); 3 day1.setTime(day1.getTime()-24*60*60*1000); 4 var s1 = day1.getFullYear()+- + (da...

rainyang 2019-08-23 13:09 评论0 收藏0