摘要:

前面给大家分享了一个react项目(http://www.cnblogs.com/xiyangbaixue/p/4751904.html),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化。

项目代码,欢迎fork和star,在线预览

REM布局实例代码

var fontSizeInit = function() {
var doc = document.documentElement,
cli = doc.clientWidth;
cli&&(cli/=320,2<cli&&(cli=2),doc.style.fontSize=16*cli+"px");
}
fontSizeInit();
window.addEventListener('resize', function() {
fontSizeInit();
});

sass:

$baseFontSize:16px !default;
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
html {
font-size: $baseFontSize;
-ms-touch-action: none;
}

rem布局在react中的应用的更多相关文章

  1. rem布局加载闪烁问题

    说明:以下内容来自CSDN,如有侵权,请立刻联系博主(我),我将删除该内容. 原文链接  https://blog.csdn.net/u013778905/article/details/779387 ...

  2. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  3. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  4. 手机端页面自适应解决方案—rem布局

    只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...

  5. REM 布局

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

  6. (淘宝无限适配)手机端rem布局详解(转载非原创)

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  7. rem布局下使用背景图片和sprite图

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊 ...

  8. 手机端页面自适应:rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  9. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

随机推荐

  1. java三大特性--多态(1)

    定义 对象具有多种形态 类型 引用的多态: 父类的引用指向自身对象 父类的引用指向子类对象 TrafficTool traffictool=new TrafficTool();//父类的引用指向本身类 ...

  2. Jenkins和maven自动化构建java程序

    转自:http://www.cnblogs.com/gao241/archive/2013/04/08/3008380.html,版权归原作者所有. Jenkins是一个非常出色的持续集成服务器,本文 ...

  3. Revit API根据链接文件开洞

    开洞信息数据: ]);             ;                     ;                     ;                     ;          ...

  4. 【转】Angular之constructor和ngOnInit差异及适用场景

    原文:http://liuwenzhuang.github.io/2016/03/04/angular2-constructor-versus-ngOnInit.html -------------- ...

  5. 使用VirtualBox在Ubuntu下虚拟Windows XP共享文件夹设置方法

    1.首先保证虚拟的Windows XP有虚拟光驱(正常安装的都是有的,因为在ubuntu下一般都是用硬盘虚拟安装的),然后在已经运行起来的Windows XP菜单栏上选择“设备-安装增强功能“,如果不 ...

  6. java webdriver的api的封装

    我们来看一下官网提供的代码写法,即最原始的写法: driver.findElement(By.id("kw")).click() 这样写是没任何问题的,但这样没有把元素对象,数据, ...

  7. sublime Text 几款插件

    留着自已以后用:http://blog.csdn.net/nivana999/article/details/7823805 1.sublime text实现vim命令格式(Vintage插件是自带的 ...

  8. MySql事务select for update及数据的一致性处理讲解

    MySQL中的事务,默认是自动提交的,即autocommit = 1: 但是这样的话,在某些情形中就会出现问题:比如: 如果你想一次性插入了1000条数据,mysql会commit1000次的, 如果 ...

  9. [APM] 解读2016之APM国内篇:快速增长的APM市场和技术

    前言 2016年是APM技术和市场快速发展的一年,在这一年里APM市场特别是国内的市场取得了极大的增长,用户对APM价值的认识和接受度也有了很大的提升,国内市场已基本完成了用户教育和市场培养的阶段.与 ...

  10. C++ 类占用空间计算方式

    1.一个类占用的空间主要是属性占用空间,而成员函数一般不占用空间,但是虚函数占用空间,需要说明的是,无论多少个虚函数,只要占用4个字节即可,也就是索引指向一个虚拟表的首位置.另外需要说明的是占用空间都 ...