JavaScript中rem布局在react中的應(yīng)用
前面給大家分享了一個(gè)react項(xiàng)目(http://chabaoo.cn/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系列useSyncExternalStore學(xué)習(xí)詳解
這篇文章主要為大家介紹了React系列useSyncExternalStore的學(xué)習(xí)及示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07react?hooks深拷貝后無法保留視圖狀態(tài)解決方法
這篇文章主要為大家介紹了react?hooks深拷貝后無法保留視圖狀態(tài)解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06教你應(yīng)用?SOLID?原則整理?React?代碼之單一原則
這篇文章主要介紹了如何應(yīng)用?SOLID?原則整理?React?代碼之單一原則,今天,我們將從一個(gè)糟糕的代碼示例開始,應(yīng)用 SOLID 的第一個(gè)原則,看看它如何幫助我們編寫小巧、漂亮、干凈的并明確責(zé)任的 React 組件,需要的朋友可以參考下2022-07-07React+Redux實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList
這篇文章主要為大家詳細(xì)介紹了React+Redux實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表ToDoList,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09React使用Canvas繪制大數(shù)據(jù)表格的實(shí)例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個(gè)很不錯(cuò)的Canvas繪圖框架Leafer,api很友好就試著寫了一下,文中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以自己動(dòng)手試試2023-09-09react使用useImperativeHandle示例詳解
這篇文章主要為大家介紹了react使用useImperativeHandle示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09React-intl 實(shí)現(xiàn)多語言的示例代碼
本篇文章主要介紹了React-intl 實(shí)現(xiàn)多語言的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11