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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
代码整洁之道(重构)
Oct 25 Javascript
angular 服务随记小结
May 06 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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的论坛(3)
2006/10/09 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
Django 请求Request的具体使用方法
2019/11/11 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python range实例用法分享
2020/02/06 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
建筑工程专业毕业生自荐信
2013/10/19 职场文书
对公司合理化的建议书
2014/03/12 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
商务英语专业求职信
2014/06/26 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电