基于淘宝弹性布局方案lib-flexible的问题研究

【基于淘宝弹性布局方案lib-flexible的问题研究】的更多相关文章

基于淘宝弹性布局方案lib-flexible的问题研究

上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewport的initial-scale,导致viewport的width不等于device width,使得那些根据width编写的media query不一定与预期的一致,还有移动web经典的retina屏图片问题和1px边框问题在lib-flexible下也会与通常的做法有所差异,本文的内容就是研究这些东西,…

淘宝弹性布局方案lib-flexible实践

2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那篇文章的总结,可惜的是因为项目的关系,这两个月来几乎没有机会做移动类项目的工作,所以那些理论一直没有得到真正的实践.这次因为公司有一个app需要做一个推广的下载页面,虽然简单,但也值得一试那篇文章里提到的适配方法,所以本文的内容就是介绍该文中提到的淘宝的做法:<lib-flexible弹性布局方案>…

淘宝弹性布局方案lib-flexible研究

1. lib-flexible不能与响应式布局兼容先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈现最佳的界面效果.典型的例子是,有一个商品列表页,应用响应式布局后,可能在pc上是用4列展示,在平板上用3列展示,在手机上只用1列展示.这种布局的最大好处就是节省人力.资源和时间,所以很多公司都喜欢用.而响应式布局有两个必须的要求: 1)是viewport的设置,width跟initial-scal…

妈妈再也不用担心我的移动端了：网易和淘宝的rem方案剖析

从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些从PC端转战web移动开发的小伙伴,因为是第一次写博文,写得不好的地方也希望大家多多包涵啦(*^__^*) 嘻嘻--(pc:文章有点长,如果你现在时间紧迫,那可以先收藏,等到有时间了再回头慢慢品尝喔) 首先我们一起看看这篇打通博主web移动开发任督二脉的武功秘籍吧: 从网易与淘宝的font-size…

网易和淘宝的rem方案剖析

以下内容到分割线前是引用前端大牛的文章,方便大家理解博主内容): 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决我觉得有些web app并一定很复杂,比如拉勾网,你看看它的页面在iphone4,iphone6,ipad下的样子就知道了: 它的页面有一个特点,就是: 顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资都位于右边这种app是一种典型的弹性布局:关键元素高宽和位置都不…

基于淘宝开源Tair分布式KV存储引擎的整合部署

一.前言 Tair支撑了淘宝几乎所有系统的缓存信息(Tair = Taobao Pair,Pair即Key-Value键值对),内置了三个存储引擎:mdb(默认,类似于Memcache).rdb(类似于Redis).ldb(高性能KV存储),其中前2者定位于cache缓存,ldb则定位于持久化存储.Tair属于分布式系统,由一个中心控制节点(Config Server)和一系列的服务节点(Data Server)组成,Config Server负责管理维护所有的Data Server状态信息.D…

淘宝双十一页面（Flexible）demo

下面的代码是看了大漠使用Flexible实现手淘H5页面的终端适配做的一个demo. <!DOCTYPE html> <html lang="en" ng-app="sections"> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable&qu…

淘宝双十一页面（Flexible）

以下demo点我下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touc…

淘宝rem适配方案

/*px 转化换 rem ,转化是 10 .比如:你的设计图为750,那么就 750 / 75 = 10 rem.设计图中你量尺寸都要除 75 就是 rem值.再比如量的设计图按钮宽度 66px,那么计算:66 / 75 = 0.88rem 比如2:设计图为900,那么 900 / 90 = 10rem;设计图中所有量的尺寸都得除 90 就等于 rem的之.以此类推*/ ;(function flexible (window, document) { var docEl = document.d…

仿淘宝使用flex布局实现页面顶部和底部的固定布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"> <style> bo…

阿里开源首个移动AI项目，淘宝同款推理引擎

淘宝上用的移动AI技术,你也可以用在自己的产品中了. 刚刚,阿里巴巴宣布,开源自家轻量级的深度神经网络推理引擎MNN(Mobile Neural Network),用于在智能手机.IoT设备等端侧加载深度神经网络模型,进行推理预测. 这是阿里开源的首个移动AI项目,已经用于阿里手机淘宝.手机天猫.优酷等20多个应用之中.覆盖直播.短视频.搜索推荐.商品图像搜索.互动营销.权益发放.安全风控等场景.在IoT等移动设备场景下,也有若干应用. 阿里表示,在iOS.Android的CPU.GPU性能上,…

[TB-Technology] 淘宝在数据处理领域的项目及开源产品介绍

淘宝在数据存储和处理领域在国内互联网公司中一直保持比较靠前的位置,而且由于电子商务领域独特的应用场景,淘宝在数据实时性和大规模计算及挖掘方面一直在国内保持着领先,因此积累了很多的实践的经验和产品. TimeTunnel 基于Hbase打造的消息中间件,具有高可靠.消息顺序.事务等传统特性,还能按时间维度反复订阅最近历史的任意数据高性能的broker,单节点达2万TPS,实际支持上千长链接并发承载海量的数据传输,日同步数据达10TB,并且包含淘宝主营收入等关键性数据在各IDC内,部署了超过2…

适用于移动设备弹性布局的js脚本(rem单位)

背景介绍目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆.以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了.如何100%还原UI设计师的设计图,一直困扰着前端工程师. css单位学习首先我们简单了解下css目前都支持哪些单位: px: 设置固定的布局或者元素大小,缺点是没有弹性 em: 参考父元素的font-size,em会继承父级元素的字体大小,em的值并不是固定的 rem: 相对根元素html…

淘宝平台进行数据的实时传输: TimeTunnel介绍

在班级工作中遇到似业务场景中的实时流传输数据的访问,所以,淘宝实时数据仓库这个人做了一些研究和了解. 本文介绍的业务场景和淘宝的设计TimeTunnel工具,从淘宝数据仓库团队沟通过程中的图像文字sildes.也参考了一些相关文件. 业务背景 TimeTunnel(简称TT)是一个基于thrift通讯框架搭建的实时传输数据平台,具有高性能.实时性.顺序性.高可靠性.高可用性.可扩展性等特点(基于Hbase). 眼下TimeTunnel在阿里巴巴广泛的应用于日志收集.数据监控.广告反馈.量子统计.…

用python分析1225万条淘宝数据，终于搞清楚了我的交易行为

大家好,我是黄同学…

（淘宝无限适配）手机端rem布局详解（转载非原创）

从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 这是淘宝的github网址,里面有适配所需的js还有说明文档地址:https://github.com/amfe/lib-flexible 1. 问题的引出最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果h…

（淘宝无限适配）手机端rem布局详解

从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 这是淘宝的github网址,里面有适配所需的js还有说明文档地址:https://github.com/amfe/lib-flexible 1. 问题的引出最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果h…

基于Bootstrap仿淘宝分页控件实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text…

Android热补丁技术—dexposed原理简析(手机淘宝采用方案)

上篇文章<Android无线开发的几种常用技术>我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到dalvik虚拟机和android的一些核心技术,现在就来介绍下它的一些原理. 本篇先介绍dexposed方案:https://github.com/alibaba/dexposed,它是手机淘宝团队使用的热补丁方案,后来开源到github上,取的名字dexposed表明了自己是基于大名鼎鼎的xposed hook方案,有饮水思源.回馈开源项…

openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图（类似淘宝方案）

openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案) --大部分的网站都要涉及到图片缩略图的处理,比如新闻配图,电商,微信朋友圈等,贴别是电商类网站,每个商品图对应多个不同尺寸的缩略图,用于不同的页面. 网站刚开始的时候,大家为了赶工期,尽快完成开发任务,基本上都会选择比较简单的方式实现功能,直接使用web服务器的图片上传和下载的功能.而且是单机部署.但问题是,图片响应速度比较慢,而且当访问量逐渐加大,服务器由…

双飞翼布局介绍-始于淘宝UED

仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术.只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案. 尝试之路考虑以下DOM结构: <div id="page"> <div id="hd"></div> <div id…

双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术.只要巧妙组合,并加以灵活运用,就能"拼"出各种布局的实现方案. 尝试之路考虑以下DOM结构: <div id="page"> <div id="hd"></div> <div id="bd&quo…

web app 自适应方案总结关键字弹性布局之rem

关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用. 一. 弹性布局使用 em 或 rem…

web app 自适应方案总结弹性布局之rem

关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用. 一. 弹性布局使用 em 或 rem…

一款基于jQuery仿淘宝红色分类导航

今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="nav"> <div class="area clearfix"> <div class="separate"> </div> <div…

学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面

由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试python来实现一个. 本次爬虫选用了webMagic+selenium+phantomjs,选用他们的原因如下: webMagic(v:0.73),一个轻量级的Java爬虫框架(git地址:https://github.com/code4craft/webmagic,主页地址:http://webmagi…