rem加百分比 移動端載入瞬間錯亂解決方案

h5頁面在手機端瀏覽時，會閃一下錯亂的頁面，然後才載入完整，讓使用者看著特不舒服。解決方案也簡單

1.js載入順序與載入方法

body以及body包含的dom還未被瀏覽器遍歷之前，我們就應該將html的font-size計算好

2.小技巧——對body進行css處理

這裡運用小技巧，利用css以及js的計時器等進行處理，先讓body隱藏，在計算好html的font-size後再令其顯示。其實按道理來說，這樣的處理方式有點粗暴，但是也不是不可採用，方法如下：

①給html中的body新增行內樣式 style=」display:none」, 先設定隱藏；

②計算js的方法在body之後新增，做到先載入網頁文件；

③在計算font-size的js方法之後新增如下第二段showpage 的js

強調文字

1毫秒的時間我們可以忽略不計

3.優化上面的小技巧——對body進行css處理

上述方法使用的display:none會有一定的問題，所以，大家不妨使用到display的表兄弟——visibility屬性,方法與2

幾乎一樣，如下：

給html中的body新增行內樣式 style=」visibility:hidden」,(就是替換display:none，其他不變) 先設定隱藏；

計算js的方法在body之後新增，做到先載入網頁文件；在計算font-size的js方法之後新增showpage 的js (就是替換display:none，其他不變)。

visibility屬性只是將元素隱藏，保留了其原本的位置，相當於它依然存在在頁面上，只是隱身了~~~~！！！！！！！相比較2，風險就小多了~！

以上這三種方法都可，這樣就解決我們載入時一閃錯亂的問題了

**：

rem加百分比 移動端載入瞬間錯亂解決方案

h5頁面在手機端瀏覽時，會閃一下錯亂的頁面，然後才載入完整，讓使用者看著特不舒服。解決方案也簡單 1.js載入順序與載入方法 body以及body包含的dom還未被瀏覽器遍歷之前，我們就應該將html的font size計算好 2.小技巧 對body進行css處理 這裡運用小技巧，利用css以及js...

移動端rem，vw,vh,百分比布局

pc端的px布局一般都會寫死固定寬高或者用min width，max width這種方式去做不同螢幕解析度適配，而移動端的布局要複雜的多。不同手機的寬高比例和螢幕尺寸都不太一樣，所以需要各種布局方式去適配 1.首先說rem布局，rem單位屬於乙個相對單位，也就是相對於根元素的html裡的font s...

記錄一次 react taro 頁面載入百分比

最近接手乙個需求，寫乙個h5頁面，taro技術棧，語法和react很像，奈何本人對react不熟，但也只能硬接上去。頁面內很多內容顯示，寫成不同的組建，把組建放在乙個陣列中，再根據字段變化呼叫不同的組建顯示，類似 存放text 組建 let showtemplate 呼叫 然後這樣有個弊端，開啟控制...