&emsp;&emsp;為了提升業務人員操作管理后臺的體驗，花了點時間進行響應式的改造，緊急情況時，掏出手機就能工作。 &emsp;&emsp;利用CSS3的媒體查詢，就能根據不同屏幕的尺寸采用不同的樣式來渲染，目前使用的移動端屏幕閾值為750px。 &emsp;&emsp;為了便于管理，基于[Less](https://lesscss.org/)的語法，聲明了一個常量，專門記錄屏幕尺寸。 ~~~css @mobile-screen: ~"(max-width:750px)"; ~~~ &emsp;&emsp;我們當前使用的管理后臺基于[UmiJS3.X](https://umijs.org/zh-CN)和[Ant Design 3.X](https://3x.ant.design/docs/react/introduce-cn)。 ## 一、結構改造 &emsp;&emsp;首先是管理后臺整體結構的改造，包括左邊的菜單欄，右邊的快捷按鈕，登錄信息等。 :-:  **1）菜單欄** &emsp;&emsp;左邊的菜單在手機界面還是蠻占地方的，默認情況下需要將其隱藏，還有那張Logo圖，也需要隱藏，最大限度的將區域留給菜單。 &emsp;&emsp;在下面的代碼中，當URL的路徑發生變化時，判斷屏幕尺寸，如果當前是顯示狀態，那么就更新成隱藏狀態。 ~~~ // 響應式處理 const mobileHandle = () => { // 屏幕尺寸小于750的就認為是移動設備的屏幕 if (window.screen.width <= 750 && !siderFold) { dispatch({ type: "app/switchSider" }); } }; // 當路徑變化時，隱藏菜單欄 useEffect(() => { mobileHandle(); }, [location.pathname]); ~~~ &emsp;&emsp;在Chrome的控制臺，切換成手機屏幕時，右半部分會出現擠壓的問題。 :-:  &emsp;&emsp;可以將右半部分設置為絕對定位，脫離正常流，再向左偏移菜單欄的寬度就能避免內容被擠壓。 ~~~css .main { width: 100%; position: absolute; left: 250px; } ~~~ **2）快捷按鈕** &emsp;&emsp;快捷按鈕有3個，PC界面這塊的高度是固定的，并且是橫向布局。移動端的屏幕比較窄，更適合縱向布局。 &emsp;&emsp;并且為了節約空間，登錄后的昵稱，也隱藏了，免得破壞布局。 :-:  **3）全局樣式** &emsp;&emsp;這些按鈕默認是沒有上下間距的，需要手動添加，例如修改Ant Design 的下拉框、搜索框、日期選擇框的下邊距，存儲在 global.css 文件中。 ~~~css .ant-select, .ant-input-search, .ant-calendar-picker { margin-bottom: 5px; } ~~~ &emsp;&emsp;有一點需要注意，不能將上述這些樣式寫在 less 文件內，因為在JavaScript文件中引用（CSS in JS）時，默認會帶各種隨機后綴。 ~~~css @media @mobile-screen { .ant-select, .ant-input-search { margin-bottom: 5px; } } /* 編譯結果 */ @media (max-width: 750px) { .ant-select___1JpXW, .ant-input-search___WeNgK { margin-bottom: 5px; } } ~~~ &emsp;&emsp;全局聲明需要權衡，當涉及的頁面很多時，也許某條樣式會破壞某處的結構。 ## 二、頁面改造 &emsp;&emsp;在頁面中使用了大量的組件，包括自定義和第三方的，默認情況下，都不支持響應式，需要進行手動改造。 **1）表格** &emsp;&emsp;管理后臺包含很多表格，這些表格都會包含很多列，直接平鋪會將頁面撐開，出現左右滾動條。 &emsp;&emsp;在觀察Ant Design表格滾動的源碼后，發現了一個 max-content 關鍵字，表示寬度就是內容的長度。 ~~~css .ant-table-body, /* 表格 */ .ant-tabs-tabpane { /* 標簽欄切換內容 */ overflow-x: scroll; width: 100%; -webkit-overflow-scrolling: touch; } .ant-table-body table, .ant-tabs-tabpane table { width: max-content; } ~~~ &emsp;&emsp;在表格的父級元素中聲明橫向滾動，就能避免布局被破壞了。 :-:  **2）內聯樣式** &emsp;&emsp;在之前的頁面開發中，很多組件的寬度都是以內聯的方式聲明的。當時的確很方便，但是現在改造給我制造了障礙。 &emsp;&emsp;如果直接在CSS文件中聲明，那么特殊性不會比內聯的高，也就不會生效，所以得用另一種方式。 &emsp;&emsp;后面就想用腳本來做樣式的更新，腳本比較好寫。但是需要考慮一種情況。 &emsp;&emsp;那就是頁面初始化時不存在的DOM元素，需要點擊或其他交互后才能被添加進來。 &emsp;&emsp;需要監聽DOM的變化，自然就想到了[MutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)，在下面的代碼中會監聽 body 元素的直系后代的DOM變化。 ~~~ useEffect(() => { const isMobile = window.screen.width <= 750; // 選擇器，數字框，文本框，卡片 const selector = ".ant-input-number[style],.ant-input[style],.ant-calendar-picker[style],.ant-card[style],.ant-input[style]"; if (!isMobile) return; const callback = function (mutationsList, observer) { // 為了響應式，將style中的寬度修改成 100% const nodes = document.querySelectorAll(selector); [...nodes].forEach((item) => { if (item.style.width && item.style.width != "100%") { item.style.width = "100%"; } }); }; // 觀察器的配置，直接子節點的更改 const config = { childList: true }; const observer = new MutationObserver(callback); // 觀察目標節點 observer.observe(document.body, config); }, []); ~~~ **3）彈框** &emsp;&emsp;在PC界面中，彈框中的內容會比較多，高度也會被撐開。 &emsp;&emsp;當在移動端顯示時，會超過屏幕的底部，無法看到彈框中的內容。 &emsp;&emsp;可以手動的聲明彈框的高度，利用[calc()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc)函數，以及vh單位，100vh就是視口高度的100%。 ~~~css height: calc(100vh - 100px) ~~~ ***** > 原文出處： [博客園-CSS躬行記](https://www.cnblogs.com/strick/category/1667864.html) [知乎專欄-CSS躬行記](https://zhuanlan.zhihu.com/pwcss) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。