使用Flexible实现手淘H5页面的终端适配

使用Flexible实现手淘H5页面的终端适配

https://blog.csdn.net/qq_16664643/article/details/52267562曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配?那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松。目标拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面:目标很清晰,就是做一个这样的H5页面。DEMO请用手机扫下面的二维码痛点虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道,这是多么痛苦的一件事情:点击这里查看更多终端设备的参数。再来看看手淘H5要适配的终端设备数据:看到这些数据,是否死的心都有了,或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发,

  • chirs
    chirs
已被阅21分钟

媒体查询、百分比、rem和vw/vh等布局对比解析

简要介绍:前端开发中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发,分析了px在移动端布局中的不足,接着介绍了几种不同的自适应解决方案。px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应一、px和视口在静态网页中,我们经常用像素(px)作为单位,来描述一个元素的宽高以及定位信息。在pc端,通常认为css中,1px所表示的真实长度是固定的。那么,px真的是一个设备无关,跟长度单位米和分米一样是固定大小的吗?答案是否定的,下面图1.1和图1.2分别表示pc端下和移动端下的显示结果,在网页中我们设置的font-size统一为16px。图1.2 移动端下font-size为16px时的显示结果从上面两幅图的对比可以看出,字体都是16px,显然在pc端中文字正常显示,

  • chirs
    chirs
已被阅18分钟

v8引擎详解

前言JavaScript绝对是最火的编程语言之一,一直具有很大的用户群,随着在服务端的使用(NodeJs),更是爆发了极强的生命力。编程语言分为编译型语言和解释型语言两类,编译型语言在执行之前要先进行完全编译,而解释型语言一边编译一边执行,很明显解释型语言的执行速度是慢于编译型语言的,而JavaScript就是一种解释型脚本语言,支持动态类型、弱类型、基于原型的语言,内置支持类型。鉴于JavaScript都是在前端执行,而且需要及时响应用户,这就要求JavaScript可以快速的解析及执行。随着Web相关技术的发展,JavaScript所要承担的工作也越来越多,早就超越了“表单验证”的范畴,这就更需要快速的解析和执行JavaScript脚本。V8引擎就是为解决这一问题而生,在node中也是采用该引擎来解析JavaScript。V8是如何使得JavaScript性能有大幅提升的呢?通过对一些书籍和文章的学习,梳理了V8的相关内容,本文将带你认识 V8。(该文在 17 年初发布于公司内网,

  • chirs
    chirs
已被阅33分钟

订阅 小球球的窝