rem布局在react中的应用

简介: rem布局在react中的应用

摘要:



前面给大家分享了一个react项目


http://www.cnblogs.com/xiyangbaixue/p/4751904.html


这次对这个项目做了一些改进,增加了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;
}


相关文章
|
7月前
|
前端开发 开发者
探索前端框架的新趋势:React Hooks的应用与实践
本文将深入探讨前端开发中的新趋势,重点介绍React Hooks的应用与实践。通过学习和使用React Hooks,开发者可以更高效地构建可维护、可扩展的前端应用程序。本文将详细介绍React Hooks的原理、优势以及如何在实际项目中运用Hooks来提高开发效率并改善代码结构。无论你是刚入门前端开发还是经验丰富的工程师,本文都将对你有所启发。
|
7月前
|
开发框架 自然语言处理 前端开发
【第25期】一文读懂React企业级前端应用框架Umi
【第25期】一文读懂React企业级前端应用框架Umi
374 0
|
前端开发
Layout布局实现一个简单的react管理后台
Layout布局实现一个简单的react管理后台
135 0
|
7月前
|
前端开发 JavaScript API
React团队回应用Vite替换Create React App的建议
React团队回应用Vite替换Create React App的建议
158 0
|
4月前
|
前端开发
使用 React Router v6 进行布局
【8月更文挑战第27天】
53 1
|
7月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
136 0
|
7月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
207 0
|
7月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
77 11
|
7月前
|
开发框架 前端开发 JavaScript
使用React、Redux和Bootstrap构建社交媒体应用
使用React、Redux和Bootstrap构建社交媒体应用
106 0
|
7月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
80 0