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

