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实现的UBB编码函数
Mar 09 Javascript
Javascript !!的作用
Dec 04 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
javascript截取字符串小结
Apr 28 Javascript
JavaScript对象学习小结
Sep 02 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 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
JavaScript 中的事件教程
2007/04/05 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
建筑设计师岗位职责
2013/11/18 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
停车位租赁协议书
2014/09/24 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
单位考核鉴定意见
2015/06/05 职场文书
基石观后感
2015/06/12 职场文书
Python中requests做接口测试的方法
2021/05/30 Python