JavaScript中rem布局在react中的应用

更新时间：2015年12月09日 09:35:26 作者：夕阳白雪

这篇文章主要介绍了JavaScript中rem布局在react中的应用的相关资料,需要的朋友可以参考下

前面给大家分享了一个react项目（https://www.jb51.net/article/76085.htm），这次对这个项目做了一些改进，增加了rem布局和对iscroll在Android上的优化。

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;
}

您可能感兴趣的文章:

React系列useSyncExternalStore学习详解
这篇文章主要为大家介绍了React系列useSyncExternalStore的学习及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React中的axios模块及使用方法
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，本文给大家分享React中axios模块的使用方法，感兴趣的朋友一起看看吧
2022-03-03
react hooks深拷贝后无法保留视图状态解决方法
这篇文章主要为大家介绍了react hooks深拷贝后无法保留视图状态解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
教你应用 SOLID 原则整理 React 代码之单一原则
这篇文章主要介绍了如何应用 SOLID 原则整理 React 代码之单一原则,今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，需要的朋友可以参考下
2022-07-07
React+Redux实现简单的待办事项列表ToDoList
这篇文章主要为大家详细介绍了React+Redux实现简单的待办事项列表ToDoList，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
React使用Canvas绘制大数据表格的实例代码
之前一直想用Canvas做表格渲染的,最近发现了一个很不错的Canvas绘图框架Leafer,api很友好就试着写了一下,文中有详细的代码示例供大家参考,感兴趣的小伙伴可以自己动手试试
2023-09-09
react使用useImperativeHandle示例详解
这篇文章主要为大家介绍了react使用useImperativeHandle示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
React-intl 实现多语言的示例代码
本篇文章主要介绍了React-intl 实现多语言的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
React Native 通告消息竖向轮播组件的封装
这篇文章主要介绍了React Native 通告消息竖向轮播组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
详解React组件卸载怎么中止递归方法
最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下
2024-01-01