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 相关文章推荐
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
webpack多页面开发实践
Dec 18 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
详解JS面向对象编程
2016/01/24 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
js实现股票实时刷新数据案例
2017/05/14 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python模块导入的细节详解
2018/12/10 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
对python中return与yield的区别详解
2020/03/12 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
小学生自我评价范例
2013/09/24 职场文书
外贸业务员的岗位职责
2013/11/23 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
北京奥运会主题口号
2014/06/13 职场文书
接待员岗位职责
2015/02/13 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript