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

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

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

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

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media…

从网易与淘宝的font-size思考前端设计稿与工作流   阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段…

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

1.主要介绍几个移动端常用的单位rem.vw.vh,配合传统的px.百分比.<viewport>标签,兼容适配移动端的各种分辨率的手机端. rm : 这个单位是以父元素为标准来进行计算 , 例如:父元素  font-size:16px;     子元素 : font-size:0.875em ; 则子元素  font-size: 0.875*16 rem : 而这个单位是以 root 根元素标准来计算的. vw : 屏幕宽度相关,1vw是屏幕宽度的1% vh : 屏幕高度相关,1vh是屏幕高度…

(function (doc, win) { var docEl = doc.documentElement, resizeEvt ="orientationchange"in window ?"orientationchange":"resize", recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWi…

   在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方案和网易的解决方案,所以今天我就从这两方面入手深度了解这两个方案. 网易转换rem分析    首先网易的设计稿是基于iPhone5设计的也就是宽度640px.(先不考虑dpr的问题下面会说)然后设置1rem等于100px( HTML font-size为100px),相当于6.4rem = 100%…

最近翻了一下关于移动端的rem的使用,怎样最方便.在读到流云诸葛的一篇关于<从网易与淘宝的font-size思考前端设计稿与工作流>的文章后,来总结一下. 然而根据我以往做移动端web项目的时候,设计稿一般是640或者750的,我一般会在head里面这样写: <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><…

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

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

因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 举例子: 1.iphone6 2.iphone5 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一 第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 好…

一 移动设备尺寸多种多样,带来适配难度,有时甚至无从下手.1 移动设备上的Px 像素不等于设备的物理像素.iphone 6 作为开发标准设备不等于设备的物理像素.iPhone 5 物理宽度320iPhone6s 物理宽度为414Android 设备物理宽度在iphone设备的宽度范围之内或者附近物理像素不等于css px像素,因为有retina屏,甚至3倍 retina屏.retina屏幕 一个物理像素等于两个CSS像素<meta name="viewport" content=…

首先先展示一下各个网站的有关meta标签的代码: 网易 <meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <meta name="apple-itunes-app" content="app-id=425349261"> <meta…

注:本文部分内容引用本人博客http://gao-xianglong.iteye.com/blog/1973591   前言 在开始讲解淘宝的TDDL(Taobao Distribute Data Layer)技术之前,请允许笔者先吐槽一番.首先要开喷的是淘宝的社区支持做的无比的烂,TaoCode开源社区上面,几乎从来都是有人提问,无人响应.再者版本迭代速度也同样差强人意,就目前而言TDDL5.0的版本已经全线开源(Group.Atom.Matrix)大家可以在Github上下载源码. 目录 一…

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

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

移动智能设备的快速普及,给生活带来巨大的精彩,但是智能设备上用户的信息数据很多,隐私数据也非常多,各种各样的app可能通过各种方式在悄悄的收集用户数据,而用户的隐私就变得耐人寻味了.比如之前的可以无限制的读取用户的联系人数据.短信记录.通话记录等,这些信息一旦泄露,可能就会造成重大财产损失.腾讯社会研究中心和DCCI互联网数据中心日前发布<2017年度网络隐私安全及欺诈行为研究分析报告>,<报告>显示,98.5%安卓手机APP存在获取用户隐私权限问题,iOS应用获取用户隐私权限也达…

剖析淘宝TDDL(TAOBAO DISTRIBUTE DATA LAYER) 博客分类: 原博客地址: http://qq85609655.iteye.com/blog/2035176 distributed   剖析淘宝 TDDL ( TAOBAO DISTRIBUTE DATA LAYER ) 注:本文部分内容引用 本人 博客 http://gao-xianglong.iteye.com/blog/1973591   前言 在开始讲解淘宝的 TDDL(Taobao Distribute Da…

tp5集成淘宝,微信,网易,新浪等第三方登录 一.总结 一句话总结: 接口 链接 实现的话就是这些平台给的一个接口(链接),你通过这些接口登录进去之后,它会给你返回用户名,头像之类的信息,我们的网站存储这些信息就好 比如微信登录 121 /** 122 * 微信登录 123 * @author tangtanglove 124 */ 125 public function wechat() 126 { 127 $state = input('get.state'); 128 if ($state…

前言 在开始讲解淘宝的TDDL(Taobao Distribute Data Layer)技术之前,请允许笔者先吐槽一番.首先要开喷的是淘宝的社区支持做的无比的烂,TaoCode开源社区上面,几乎从来都是有人提问,无人响应.再者版本迭代速度也同样差强人意,就目前而言TDDL5.0的版本已经全线开源(Group.Atom.Matrix)大家可以在Github上下载源码. 目录 一.互联网当下的数据库拆分过程 二.TDDL的架构原型 三.下载TDDL的Atom层和Group层源代码 四.Diamon…

nginx简介(轻量级开源高并发web服务器:大陆使用者百度.京东.新浪.网易.腾讯.淘宝等)(并发量5w)(一般网站apache够用了,而且稳定) 一.总结 1.在连接高并发的情况下,Nginx是Apache服务器不错的替代品,apache并发量大概3000+,nginx并发量2w+ 二.nginx简介(轻量级开源高并发web服务器:大陆使用者百度.京东.新浪.网易.腾讯.淘宝等) Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服…

淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <title>网易新用户注册页面</title> <link rel="stylesheet" href="css/register.css" /> <script type="text/javascript" src…

Cas自定义登录页面Ajax实现:http://cydiay.iteye.com/blog/1738713 CAS 之 跨域 Ajax 登录实践:http://denger.iteye.com/blog/1119233 新浪微博如何实现 SSO 的分析:http://www.iteye.com/topic/1039052 淘宝如何跨域获取Cookie分析:http://www.iteye.com/topic/1000776 如果以上网页不能访问,则看下面的网页整页截图: 二: 三: 四:…

摘要: Tair的功能 Tair是一个Key/Value结构数据的解决方案,它默认支持基于内存和文件的两种存储方式,分别和我们通常所说的缓存和持久化存储对应. Tair除了普通Key/Value系统提供的功能,比如get.put.delete以及批量接口外,还有一些附加的实用功能,使得其有更广的适用场景,包括: Version支持> 原子计数器 Item支持 Tair是由淘宝网自主开发的Key/Value结构数据存储系统,在淘宝网有着大规模的应用.您在登录淘宝.查看商品详情页面或者在淘江湖和好友…

MySQL@淘宝 在过去两年, 淘宝数据库团在MySQL.SSD.开源迈出了巨大的步伐,截至11年十月用户数据库库.商品库.交易库都已经稳定的运行在MySQL上,同时也经历的双十一,双十二的考验.这里我们将为大家分享背后的经验和教训. 本系列培训中“基础篇”会为大家介绍MySQL使用过程中的常见问题和解决方案.深入篇则侧重于分享更多MySQL底层解决问题解决的思路. 基础篇:  <MySQL索引与SQL调优>讲师:玄惭   (微博:玄惭) 本课程将从Mysql的底层存MySQL索引与SQL调优…

总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价main.js中引用flexible import 'lib-flexible' 3.由于在开发中rem和px手动转换比较麻烦,所以建议安装px2rem这个工具 3.1安装px2rem工具 npm install px2rem-loader --save-dev 3.2在vue-cli生成的文件中,找到…

卷 TOSHIBA EXT 的文件夹 PATH 列表卷序列号为 AE86-8E8DF:.│ python就业班-淘宝-目录.txt│ ├─01 网络编程│ ├─01-基本概念│ │ 01-网络通信概述.flv│ │ 02-IP地址.flv│ │ 03-Linux.windows查看网卡信息.flv│ │ 04-ip地址的分类-ipv4和ipv6介绍.flv│ │ 05-(重点)端口.mp4│ │ 06-端口分类:知名端口.动态端口.flv│ │ 07-socket介绍.mp4│ │ │ ├─02…