摘要:

前面给大家分享了一个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. PHP类的继承

    每个子类(也叫派生类)都会在设置自己的属性前调用父类的构造方法.父类(也叫基类或超类)现在仅知道自己的数据,子类一般是父类的特例,要避免告诉父类任何关于子类的信息 以下为一个使用继承的实例: < ...

  2. 【POJ 3694】 Network(割边&lt;桥&gt;+LCA)

    [POJ 3694] Network(割边+LCA) Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 7971 ...

  3. APICloud和海马玩模拟器结合调试手机页面

    https://blog.csdn.net/pleasecallme_522/article/details/54577904

  4. [Python设计模式] 第2章 商场收银软件——策略模式

    github地址: https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序, 模拟商场收银软件,根据客户购买商品的单价和数量,计 ...

  5. vim 在行首 行尾添加字符

    在行首添加字符: %s/^/your_word/ 在行尾添加字符 %s/$/your_word/

  6. ionic 布局

    1. row col 设置自动换行 <!--长文本换行 item-text-wrap--> <li class="item item-text-wrap" ng- ...

  7. addEventListener 第三个参数

    addEventListener api target.addEventListener(type, listener[, options]); target.addEventListener(typ ...

  8. 使用SpringBoot Admin监控SpringCloud微服务

    spring-boot admin的github地址:https://github.com/codecentric/spring-boot-admin 本文基于SpringCloud的环境和配置上增加 ...

  9. 用ctrl+鼠标滚动调节字体大小

    如此设置之后,按住ctrl+鼠标滚动,可以放大和变小代码的字号.

  10. asp.net core2->2.1 webapi 进行了重大变更

    传统的在 启动时候 使用Mvc路由的配置不再有效.而是基于Attribute的声明标注进行配置路由.