摘要:

前面给大家分享了一个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. Linux学习笔记13—Vi编辑器的学习

    文本编辑工具vim.vi1. vim与vi的最大区别是vim编辑的时候是带颜色显示的.Vi不带颜色显示.2. yum install -y vim-enhanced 如果没有安装VIM 使用上面的命令 ...

  2. Standard Series Values in a Decade for Resistances and Capacitances E24 E48 E96

    E3     50% tolerance (no longer used)E6     20% tolerance (now seldom used)E12   10% toleranceE24    ...

  3. CentOS 7.0关闭默认防火墙启用iptables防火墙

    转自:https://www.cnblogs.com/lixuwu/p/6087023.html 阅读目录 1 配置防火墙,开启80端口.3306端口 2 关闭SELINUX 3 CentOS 配置防 ...

  4. PHP的unset究竟会不会释放内存?

    首先让我们看一个例子 var_dump(memory_get_usage());    $a = "laruence";    var_dump(memory_get_usage( ...

  5. JavaScript之Date日期对象扩展

    各种时间加减 收藏起来以备后用 //名称:日期加法函数 //参数:part(year.month.day.hour.minute.second.millisecond) //返回:Date对象 Dat ...

  6. SpringBoot使用Mybatis注解开发教程-分页-动态sql

    代码示例可以参考个人GitHub项目kingboy-springboot-data 一.环境配置 1.引入mybatis依赖 compile( //SpringMVC 'org.springframe ...

  7. C# System.IO.File

    using System; using System.IO; class Test { public static void Main() { string path = @"c:\temp ...

  8. python3用BeautifulSoup抓取图片地址

    # -*- coding:utf-8 -*- #python 2.7 #XiaoDeng #http://tieba.baidu.com/p/2460150866 #抓取图片地址 from bs4 i ...

  9. PCA实现

    代码实现分成好多种层级,有的代码只使用标准库实现,有的代码基于其它库实现,有的代码直接调用库中现有的实现. 在本文中,按照不同的层级分别实现PCA 对于分类问题基本任务可以描述如下 x11 x12 x ...

  10. 6种常见的Git错误以及解决的办法

    我们都会犯错误,尤其是在使用像Git这样复杂的东西时.如果你是Git的新手,可以学习如何在命令行上开始使用Git.下面介绍如何解决六个最常见的Git错误. Photo by Pawel Janiak  ...