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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
前端JS获取URL参数的4种方法总结
Apr 05 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 无限分类的树类代码
2009/12/03 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
js继承的实现代码
2010/08/05 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
vue观察模式浅析
2018/09/25 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
酒店管理毕业生自我鉴定
2014/03/02 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
周年庆典答谢词
2015/01/20 职场文书
考试作弊检讨
2015/01/27 职场文书
退税申请报告怎么写
2015/05/18 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
python垃圾回收机制原理分析
2022/04/13 Python