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实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
js运动应用实例解析
Dec 28 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
webpack 模块热替换原理
Apr 09 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
js代码实现轮播图
May 04 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP mkdir()定义和用法
2009/01/14 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
Array对象方法参考
2006/10/03 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue实现购物车加减
2020/05/30 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Python读写unicode文件的方法
2015/07/10 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL