快捷導(dǎo)航

JavaScript中rem布局在react中的應(yīng)用

更新時(shí)間：2015年12月09日 09:35:26 作者：夕陽(yáng)白雪

這篇文章主要介紹了JavaScript中rem布局在react中的應(yīng)用的相關(guān)資料,需要的朋友可以參考下

前面給大家分享了一個(gè)react項(xiàng)目（http://www.fzitv.net/article/76085.htm），這次對(duì)這個(gè)項(xiàng)目做了一些改進(jìn)，增加了rem布局和對(duì)iscroll在Android上的優(yōu)化。

項(xiàng)目代碼，歡迎fork和star，在線預(yù)覽

REM布局實(shí)例代碼

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

您可能感興趣的文章:

相關(guān)文章

React使用Echarts/Ant-design-charts的案例代碼
這篇文章主要介紹了React使用Echarts/Ant-design-charts的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-11-11
淺析React 對(duì)state的理解
state狀態(tài)是組件實(shí)例對(duì)象身上的狀態(tài)，不是組件類(lèi)本身身上的，是由這個(gè)類(lèi)締造的實(shí)例身上的。這篇文章主要介紹了React 對(duì)state的理解,需要的朋友可以參考下
2021-09-09
react自定義實(shí)現(xiàn)狀態(tài)管理詳解
這篇文章主要為大家詳細(xì)介紹了react如何自定義實(shí)現(xiàn)狀態(tài)管理,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
關(guān)于hooks中useEffect()的使用總結(jié)
這篇文章主要介紹了關(guān)于hooks中useEffect()的使用總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
React 數(shù)據(jù)獲取條件競(jìng)爭(zhēng)原理解析
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取條件競(jìng)爭(zhēng)原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
React利用props的children實(shí)現(xiàn)插槽功能
React中并沒(méi)有vue中的?slot?插槽概念?不過(guò)?可以通過(guò)props.children?實(shí)現(xiàn)類(lèi)似功能，本文為大家整理了實(shí)現(xiàn)的具體方，需要的可以參考一下
2023-07-07
ReactNative 之FlatList使用及踩坑封裝總結(jié)
本篇文章主要介紹了ReactNative 之FlatList使用及踩坑封裝總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
React組件傳參方式你了解嗎
眾所周知?,在業(yè)務(wù)開(kāi)發(fā)中,無(wú)論用的什么框架,首先要熟悉項(xiàng)目搭建,路由配置和組件通信,所以我們今天要探究的就是React中組件通信的幾種方式,快跟隨小編一起學(xué)習(xí)起來(lái)吧
2024-03-03
React無(wú)限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn)
無(wú)限下拉加載技術(shù)是用戶在大量成塊的內(nèi)容面前一直滾動(dòng)查看,本文主要介紹了React無(wú)限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
在 React 中使用 Redux 解決的問(wèn)題小結(jié)
在 React 中組件通信的數(shù)據(jù)流是單向的，頂層組件可以通過(guò) props 屬性向下層組件傳遞數(shù)據(jù)，而下層組件不能直接向上層組件傳遞數(shù)據(jù)，這篇文章主要介紹了使用react+redux實(shí)現(xiàn)彈出框案例,需要的朋友可以參考下
2022-10-10