vuecli4里使用rem

首先安裝安裝兩個(gè)插件

屏幕自適應(yīng)插件? npm i amfe-flexible --save

把px轉(zhuǎn)成rem的插件,只能在css文件里面寫(xiě) 里面的? ?npm i postcss-px2rem --save

package.json中添加如下代碼：

"remUnit":75表示 ui小姐姐給的圖 是按照750px這個(gè)尺寸設(shè)計(jì)的

注意postcss-px2rem安裝如果報(bào)錯(cuò)# node.getIterator is not a function

場(chǎng)景:vue搭建移動(dòng)端頁(yè)面，main.js引入全局css報(bào)錯(cuò)。

原因：用了postcss-px2rem與postcss-px2rem-exclude導(dǎo)致的問(wèn)題臀玄，

解決方法：那么卸載postcss-px2rem安裝使用postcss-pxtorem。在postcss.config.js設(shè)置如下代碼懂从，可以自行更改設(shè)置，解決問(wèn)題。如果沒(méi)有postcss.config.js就自己創(chuàng)建并且刪除之前package.json中代碼

再在postcss.config.js文件中寫(xiě)入如下代碼

移動(dòng)端的兼容性問(wèn)題

一. 華為榮耀3C的原生瀏覽器問(wèn)題：

同一行內(nèi)，存在靠左與靠右的元素時(shí)斩狱，都必須加上浮動(dòng)耳高，否則，右浮元素不右浮喊废，影響后續(xù)排版祝高。

兩個(gè)行內(nèi)元素span元素都要浮動(dòng)才行栗弟。

二. ios safari時(shí)間顯示問(wèn)題污筷。

之前設(shè)置new Date日期格式的時(shí)候，在ios中的safari中發(fā)現(xiàn)顯示效果與其他瀏覽器不一致乍赫，找了多方面原因瓣蛀，結(jié)果是把“-”換成“/”就可以解決了。new Date("year-month-day");只識(shí)別new Date("year/month/day");

三. 關(guān)于長(zhǎng)按識(shí)別二維碼問(wèn)題雷厂。

安卓設(shè)備微信中識(shí)別沒(méi)問(wèn)題惋增，結(jié)果到了ios中識(shí)別不了。最終發(fā)現(xiàn)是將position設(shè)置為fixed改鲫，ios的微信中長(zhǎng)按會(huì)不起作用诈皿。要想在ios的微信中實(shí)現(xiàn)長(zhǎng)按識(shí)別二維碼，只需確保二維碼圖片和包住圖片的div都沒(méi)有設(shè)置position:fiexd即可像棘。

四. 移動(dòng)端最小識(shí)別rem問(wèn)題稽亏。

移動(dòng)端相對(duì)來(lái)說(shuō)兼容性不是什么問(wèn)題，但是實(shí)際項(xiàng)目中發(fā)現(xiàn)缕题，如果采用rem: .01rem;有些機(jī)型如：魅藍(lán)note截歉、iphone5等機(jī)型的webview中顯示不出來(lái)。華為榮耀有的設(shè)置border的時(shí)候烟零，有時(shí)0.03rem可以瘪松，有時(shí)不可以，暫時(shí)不明所以锨阿。所以還是建議宵睦，像border這種屬性，移動(dòng)端可以設(shè)置為1px墅诡。

五.在移動(dòng)端圖片上傳圖片兼容低端機(jī)的問(wèn)題壳嚎。

解決方案:input 加入屬性 accept="image/*" multiple

六. 讓hybird app中的webview頁(yè)面看起來(lái)更像native。

web相較于native有一個(gè)好處就是版本更新比較方便书斜，不會(huì)出現(xiàn)native應(yīng)用商店審核亂七八糟的時(shí)間诬辈，直接點(diǎn)擊app的某個(gè)按鈕，使用webview打開(kāi)頁(yè)面荐吉，該頁(yè)面隨意替換都非常方便焙糟。最常用的就是活動(dòng)頁(yè)面，定期的活動(dòng)只需要前端開(kāi)發(fā)人員維護(hù)即可样屠。但是假如用戶(hù)長(zhǎng)按屏幕的時(shí)候出現(xiàn)選中文本的場(chǎng)景穿撮，看起來(lái)不那么想native缺脉，如果有解決這個(gè)問(wèn)題的需求，可使用：

其中Element為任意元素悦穿，或者直接將其寫(xiě)入cssReset文件中攻礼。

七. 移動(dòng)端300ms延遲。

300ms尚可接受栗柒，不過(guò)因?yàn)?00ms產(chǎn)生的問(wèn)題礁扮，我們必須要解決。300ms導(dǎo)致用戶(hù)體驗(yàn)并不是很好瞬沦，解決這個(gè)問(wèn)題太伊，我們一般在移動(dòng)端用tap事件來(lái)取代click事件。推薦兩個(gè)js逛钻，一個(gè)是fastclick僚焦，一個(gè)是tap.js

八. 移動(dòng)端 HTML5 audio autoplay 失效問(wèn)題

這個(gè)不是 BUG，由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻曙痘，會(huì)給用戶(hù)帶來(lái)一些困擾或者不必要的流量消耗芳悲，所以蘋(píng)果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS 的觸發(fā)播放，必須由用戶(hù)來(lái)觸發(fā)才可以播放边坤。

解決方法思路：先通過(guò)用戶(hù) touchstart 觸碰名扛，觸發(fā)播放并暫停（音頻開(kāi)始加載，后面用 JS 再操作就沒(méi)問(wèn)題了）惩嘉。

九罢洲、input為fixed定位，在ios下input固定定位在頂部或者底部文黎，在頁(yè)面滾動(dòng)一些距離后惹苗，點(diǎn)擊input(彈出鍵盤(pán))，input位置會(huì)出現(xiàn)在中間位置耸峭。

解決方案:內(nèi)容列表框也是fixed定位,這樣不會(huì)出現(xiàn)fixed錯(cuò)位的問(wèn)題