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