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中为元素加上name属性的方法
May 09 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
js数组实现权重概率分配
Sep 12 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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
PHP Cookie的使用教程详解
2013/06/03 PHP
php命名空间学习详解
2014/02/27 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
php新建文件的方法实例
2019/09/26 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
Js获取事件对象代码
2010/08/05 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
SQL面试题
2013/12/09 面试题
遇到的Mysql的面试题
2014/06/29 面试题
库房主管岗位职责
2013/12/31 职场文书
留学顾问岗位职责
2014/04/14 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
MySQL学习之基础操作总结
2022/03/19 MySQL