手機端方案一（REM）

scss裡面的px2rem函式，實現 px 自動變 rem。

例子：

在 scss 檔案裡新增以下**

@functionpx( $px )

$designwidth : 640;
// 640 是設計稿的寬度，你要根據設計稿的寬度填寫。
.child [normal = false] - 預設開啟頁面壓縮以使頁面高畫質;  
* @param  [basefontsize = 100] - 基礎fontsize, 預設100px;
* @param  [fontscale = 1] - 有的業務希望能放大一定比例的字型;
*/const win = window;
export default win.flex = (normal, basefontsize, fontscale) => )/i);
const isuchd = ucversion && parseint(ucversion[1].split('.').join(''), 10) >= 80;
let dpr = win.devicepixelratio || 1;
if (!isios && !(matches && matches[1] > 534) && !isuchd) 
const scale = normal ? 1 : 1 / dpr;
let metael = doc.queryselector('meta[name="viewport"]');
if (!metael) 
metael.setattribute('content', `width=device-width,user-scalable=no,initial-scale=$,maximum-scale=$,minimum-scale=$`);
doc.documentelement.style.fontsize = normal ? '50px' : `$px`;
};

rem手機端適配方案

1.頁面加入如下 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc...

手機端頁面自適應解決方案 rem布局

只需在頁面引入這段原生js 就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recal...

手機端頁面自適應解決方案 rem布局

相信很多剛開始寫移動端頁面的同學都要面對頁面自適應的問題，當然解決方案很多，比如 百分比布局，彈性布局flex 什麼是flex 也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案 rem 什麼是rem 布局 rem布局非常簡單，首頁你只需在頁面引入這段原生js 就可以了 f...