淘宝移动端兼容

js控制分辨率等比例缩放

var scale = 1 / devicePixelRatio;
document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);

淘宝布局的第二个要点,就是html元素的font-size的计算公式,font-size = deviceWidth / 10:

接下来要解决的问题是,元素的尺寸该如何计算,比如说设计稿上某一个元素的宽为150px,换算成rem应该怎么算呢?这个值等于设计稿标注尺寸/该设计 稿对应的html的font-size。拿淘宝来说的,他们用的设计稿是750的,所以html的font-size就是75,如果某个元素时150px 的宽,换算成rem就是150 / 75 = 2rem。总结下淘宝的这些做法:

				
时间: 2024-09-29 17:07:56

淘宝移动端兼容的相关文章

淘宝服务端高并发分布式架构演进之路

1. 概述 本文以淘宝作为例子,介绍从一百个并发到千万级并发情况下服务端的架构的演进过程,同时列举出每个演进阶段会遇到的相关技术,让大家对架构的演进有一个整体的认知,文章最后汇总了一些架构设计的原则. 2. 基本概念 在介绍架构之前,为了避免部分读者对架构设计中的一些概念不了解,下面对几个最基础的概念进行介绍: 分布式 系统中的多个模块在不同服务器上部署,即可称为分布式系统,如Tomcat和数据库分别部署在不同的服务器上,或两个相同功能的Tomcat分别部署在不同服务器上 高可用 系统中部分节点

淘宝——移动端页面终端适配

注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录 适配的要求 适配的方法,3个步骤 适配中背景图片的处理 适配的原理解析 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小

淘宝内部的兼容大屏幕iPhone设计流程

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代.看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了. 加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大.中.小三种屏幕.所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么

淘宝购物车页面 -- PC端和移动端实战

最近花了半个月的时间,做了一个淘宝购物车页面的demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在media query为768px以下(也就是实现了ipad,iphone 6 plus,iphone6,S5等)的flexbox弹性布局. 还要再说的是,pc端和移动端淘宝购物车页面的bug基本修复完毕,完全适合一个对html,css,css3 ,html5和js有基础,并且熟悉jquery,scss,熟悉json数据交换格式,jquery ajax的人进行学习

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

仿淘宝详情转场(iOS,安卓没有这功能)

由于公司是做跨境电商的,所以对各大电商APP都有关注,最近看到淘宝iOS端(安卓没有)在商品详情点击加入购物车有一个动画效果特别赞,正好今天新版本上线,下午就抽了些时间研究了下. 主要思路是自定义转场,在弹出选择尺寸时候,对fromVC翻转,缩放等动作. 效果: code: http://files.cnblogs.com/files/10-19-92/CustomTransition.zip

聊一聊淘宝首页和它背后的一套

聊一聊淘宝首页和它背后的一套 作者: 小胡子哥 2016-06-02 12:00:00本文发布时间为2016年06月02日12时00分00秒 分类: 前端杂烩 标签: 淘宝首页 下面是正文内容评论数: 12条评论 从 14 年双十二结束开始接手淘宝首页,到如今差不多 1 年半时间,不久前完成了首页相关工作的交接.期间经历了两次改版和一次从 PHP 到 Node 的迁移,还是颇有感受,下面给大家分享下.我要说话 文章好像有点长,列个大纲会比较好:我要说话 一.相关背景介绍二.淘宝首页的整理变迁

“往来”新春许愿季或超越淘宝双十一

摘要 通过往来,春节期间大家用手机许愿并相互祝福馈赠,你拿100元给20个好朋友的愿望每个5元(往来give me five按钮每次赠送5元)不会心疼,而你的愿望每收到朋友5元的祝福都会开心! 新春即将来临,传统商家们都在积极营销,确保自己的产品能够在年底来个销量大冲刺,以好迎接来年的"开门红".各大电商平台也刮起了营销风,各类营销噱头更是让人目不暇接.如此繁华的盛况背后,折射的则是商业模式的单一和消费者购物欲望的低频."往来"作为一款基于商品场景的移动社交电商应用

从PHP到Node,聊一聊淘宝首页背后的技术

从 2014 年双十二结束开始接手淘宝首页,到如今差不多 1 年半时间了,不久前完成了首页相关工作的交接.经历了两次改版和一次从 PHP 到 Node 的迁移,还是颇有感受,下面给大家分享下. 一.相关背景介绍 淘宝首页是淘宝的门面,承载着几乎淘系所有业务的入口,流量很大,量级单位为亿.近几年无线端崛起,业务重点开始向无线终端偏移(目前不能叫偏移,基本以无线为主了),所以淘宝 PC 端首页的流量也有削减,不过即便如此,它的日均 PV 依然相当高. 淘宝首页一向是内部平台和技术的试验田,它一直在变