摘要:

前面给大家分享了一个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. 15个优秀的开源项目,让你轻松应对Android开发

    一.huabanDemo-android 应用material design版的花瓣网App 项目地址 https://github.com/LiCola/huabanDemo 二.创建视差效果引导页 ...

  2. fatal error C1859 意外的预编译头错误,只需重新运行编译器(转)

    微软的建议 要解决此问题,请使用下列方法之一. http://support.microsoft.com/kb/976656/zh-cn 方法 1 禁用/analyze编译器选项,则它会被启用. 方法 ...

  3. PHP 计算两个时间戳之间相差的时间

    //功能:计算两个时间戳之间相差的日时分秒 //$begin_time 开始时间戳 //$end_time 结束时间戳 function timediff($begin_time,$end_time) ...

  4. 前端AngularJS后端ASP.NET Web API上传文件

    本篇体验使用AngularJS向后端ASP.NET API控制器上传文件.    首先服务端: public class FilesController : ApiController { //usi ...

  5. 这可能是最好的RxJava 2.x 入门教程(一)

    这可能是最好的 RxJava 2.x 入门教程系列专栏 文章链接: 这可能是最好的 RxJava 2.x 入门教程(完结版)[重磅推出] 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最 ...

  6. 还在为工作发愁?学JavaScript吧

    事实上,每家专业招聘机构,从Glassdoor.com和Linkedin到美国劳工部,都报导了就业市场对开发人员需求的增长速度出于意料地快.这种需求可能已经不新鲜了,但是就业市场对哪种开发语言的需求量 ...

  7. 微信小程序 scroll-view 实现锚点跳转

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...

  8. Kafka:ZK+Kafka+Spark Streaming集群环境搭建(三十):使用flatMapGroupsWithState替换agg

    flatMapGroupsWithState的出现解决了什么问题: flatMapGroupsWithState的出现在spark structured streaming原因(从spark.2.2. ...

  9. spring注解@Scheduled中fixedDelay、fixedRate和cron表达式的区别

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  10. Java 下一代: 函数式编码风格——Groovy、Scala 和 Clojure 共享的函数结构及其优势

    原文地址 本文内容 命令式处理 函数式处理 函数式编程的优势 所有 Java 下一代语言都包括函数式编程结构,让您可以从一个更高的抽象层面来思考问题.然而,语言间术语的不同使得难以看到类似的结构.本期 ...