(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt ="orientationchange"in window ?"orientationchange":"resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth<640){
docEl.style.fontSize = 12 * (clientWidth / 320) +"px";
console.log(12 * (clientWidth / 320) +"px");
}else{
//docEl.style.fontSize ="12px";
docEl.style.fontSize = 12 * ( 640 / 320) +"px";
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

移动开发,Webapp 淘宝手机 rem 布局的更多相关文章

  1. 淘宝手机rem的如何使用

    1.主要介绍几个移动端常用的单位rem.vw.vh,配合传统的px.百分比.<viewport>标签,兼容适配移动端的各种分辨率的手机端. rm : 这个单位是以父元素为标准来进行计算 , ...

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

    从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...

  3. 原生js仿淘宝手机购买选项代码

    这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...

  4. 网易和淘宝的rem方案剖析

    以下内容到分割线前是引用前端大牛的文章,方便大家理解博主内容): 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些web app并一定很复杂,比如拉勾网,你看 ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. Android开发案例 - 淘宝商品详情

    所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPa ...

  7. Android开发案例 - 淘宝商品详情【转】

    http://erehmi.cnblogs.com/ 所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等 ...

  8. 使用vue开发webApp,安卓手机自带回退键的问题解决

    首先,我先为大家说明,为什么我要写这篇随笔: 因为我们写的webapp,在安卓手机上,按一次回退键,就会退出app,回到桌面,而不是像原生app一样,会有一个提示,例如,“再按一次退出应用”的这种提示 ...

  9. iOS开发 仿淘宝,京东商品详情3D动画

    - (void)show { [[UIApplication sharedApplication].windows[0] addSubview:self.projectView]; CGRect fr ...

随机推荐

  1. java基础知识(6)---抽象类与接口

    抽象类: abstract抽象:不具体,看不明白.抽象类表象体现.在不断抽取过程中,将共性内容中的方法声明抽取,但是方法不一样,没有抽取,这时抽取到的方法,并不具体,需要被指定关键字abstract所 ...

  2. k8s组件简介

    Kubernetes is constructed using several components, as follows:f Kubernetes masterf Kubernetes nodes ...

  3. day18-事务与连接池 6.事务隔离级别与解决问题

    开两个cmd窗口,相当于两个事务. read-uncommitted这种级别是解决不了任何问题的,它什么情况都能出现.刚才演示了脏读,再演示就出现了不可重复读. read-committed隔离级别能 ...

  4. 第六篇 elasticsearch express 删除索引数据

    express 框架删除elasticsearch索引数据 1.在elasticsearch.js文件下添加 function deleteDocument(id) { return elasticC ...

  5. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  6. R语言:文本(字符串)处理与正则表达式

    R语言:文本(字符串)处理与正则表达式 (2014-03-27 16:40:44) 转载▼ 标签: 教育 分类: R 处理文本是每一种计算机语言都应该具备的功能,但不是每一种语言都侧重于处理文本.R语 ...

  7. 基于http的多进程并发文件服务器

    1 可以掌握的知识点 (1) 线上部署时的守护应用 (2) 常规的文件操作,配置文件读取 (3) 网络编程,端口复用等文件 (4) 多进程知识 2 代码注释如下 test_httpd.h #inclu ...

  8. 阶段3-团队合作\项目-网络安全传输系统\sprint1-传输子系统设计\第3课-加密传输优化

    对之前的传输系统进行加密,使之成为加密的网络传输系统 客户端编程模型 通过以上模型对传统的TCP传输模型进行优化 首先完成初始化工作,它是要在创建socket之前完成 主要是以上四个函数的实现,那么这 ...

  9. 今年暑假不AC--贪心算法

    Problem Description “今年暑假不AC?”“是的.”“那你干什么呢?”“看世界杯呀,笨蛋!”“@#$%^&*%...” 确实如此,世界杯来了,球迷的节日也来了,估计很多ACM ...

  10. 将一个mapList转换为beanList

    public static <T> List<T> copyMapToBean(   List<Map<String, Object>> resultM ...