一 靜態頁面的布局
將這段**加到script中
(function(doc, win) else};if (!doc.addeventlistener) return;
//瀏覽器寬度高度變化的時候
win.addeventlistener(resizeevt, recalc, false);
//瀏覽器開始渲染的時候
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window);
設計圖中某個元素的尺寸是200px那麼計算rem就是200/100=2rem
二 頁面的動態效果
一般也就直接用外掛程式了,一般用這個就可以了:
三 頁面中資料的互動
一般移動端頁面的互動和pc端的是一樣的獲取的ajax 就可以了
四 rem在實際中應用的時候,需要完善一下:
直接應用上面那種會出現在安卓的時候正常顯示,在蘋果手機顯示的時候是文字是非常小的
這是dpr的原因,ios的有的是2倍屏,3倍屏,所以會造成「比android」看起來小的原因,解決策略
(function(win,lib) );if (metael)
} else if (flexibleel)
if (maximumdpr) }}
if (!dpr && !scale) else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else
} else
scale = 1 / dpr;
}docel.setattribute('data-dpr', dpr);
if (!metael) else
}function refreshrem()
var rem = width / 750 * 100; // 設計圖 750
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}win.addeventlistener('resize', function() , false);
win.addeventlistener('pageshow', function(e)
}, false);
if (doc.readystate === 'complete') else , false);
}refreshrem();
flexible.dpr = win.dpr = dpr;
flexible.refreshrem = refreshrem;
flexible.rem2px = function(d)
return val;
}flexible.px2rem = function(d)
return val;
}})(window, window['lib'] || (window['lib'] = {}));
Flexible實現H5頁面的rem布局適配
1 使用flexible實現手淘h5頁面的終端適配 2 flexible實現手淘h5頁面的rem布局適配 3 vue移動端flexible.js結合muse ui使用的小坑 4 的flexible適配方案為什麼只對ios進行dpr判斷,對於android始終認為其dpr為1 6 rem 及由此引申出...
h5頁面的寫法 移動端h5頁面寫法
1.頁面寬度320,所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640,元素尺寸正常 暫未發現問題 3.頁面寬度640,js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...
h5頁面的快取問題
最近遇到乙個靈異事件 js上線前會build帶上hash,hash方式採用 aaa 1s12jashdjas.js 方式 1 開始排查流程,前端修改了不規範的 格式,再次上線仍可復現 2 疑似nginx有快取html檔案,找運維排查,nginx沒有快取該html頁面 3 又排查nginx配置問題,再...