JavaScript中rem布局在react中的应用


Posted in Javascript onDecember 09, 2015

前面给大家分享了一个react项目(https://3water.com/article/76085.htm),这次对这个项目做了一些改进,增加了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;
}
Javascript 相关文章推荐
Javascript 布尔型分析
Dec 22 Javascript
JavaScript 常用函数
Dec 30 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
js获取微信版本号的方法
May 12 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 #Javascript
javascript如何写热点图
Dec 08 #Javascript
You might like
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python pandas用法最全整理
2019/08/04 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
简历自我评价模版
2014/01/31 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
保险公司演讲稿
2014/09/02 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
中学社团活动总结
2015/05/07 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis