1，先看看網(wǎng)上關(guān)于移動端適配講解

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的西充網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

再聊移動端頁面適配，rem和vw適配方案！

基礎(chǔ)點：rem相對根節(jié)點字體的大小。所以不用px;

根字體：字體的大小px;

px：你就當(dāng)成cm(厘米)這樣的東西吧；

基準(zhǔn)：750設(shè)計稿；

這是方案的基礎(chǔ)理論，在這個基礎(chǔ)上，我們還要搞明白，到底要干一件什么事情！

目標(biāo)一、手機(jī)適配：就是頁面上的尺寸，無論高度，還是寬度，還有字體，隨屏幕的寬度變化！這里是屏幕寬度！是不是想到了vw，對，就是這個意思；——大程度在各個尺寸屏幕上還原設(shè)計稿

目標(biāo)二、px轉(zhuǎn)換成rem：一般UI給的設(shè)計稿寬度大小是750，所以，我們想直接寫上面UI標(biāo)記的尺寸；——大程度減少工作

為什么選擇rem?

很久之前沒有vw，怕vw的兼容問題，就用了rem；也就是：rem的兼容性>vw的兼容性；

還有一種就是自己寫百分比很不優(yōu)雅

一、理論基礎(chǔ)！

實現(xiàn)目標(biāo)一

用rem就可以了吧！因為rem就可以隨根字體大小改變而改變，從而實現(xiàn)了自適應(yīng)的功能。

但是，但是，重點來，如果，根字體的大小默認(rèn)是16px；那么，我們的1rem；就永遠(yuǎn)是16px，懂么？也就是如果設(shè)計稿是750（放大了一倍，iphone是375pt),我們想要個50%的大小:

50%*357px/16=11.718rem

如果我們寫一個11.718rem的寬度，然而這只能在能iphone6還原設(shè)計稿，也就是只有在iphone6上這樣的寬度才剛好占一半；

那么問題來了，如果在每個屏幕上都是50%呢，直接改變根字體大小（16px)不就完了么?。?；11.718rem永遠(yuǎn)還是那個11.718rem，不用擔(dān)心；

實現(xiàn)目標(biāo)二、

用工具，webpack，postcss,postcss-pxtorem

二、準(zhǔn)備主要工具！

viewport: 建議自行百度；

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：解決vue移動端適配問題-創(chuàng)新互聯(lián)
瀏覽地址：http://www.rwnh.cn/article20/csjeco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、服務(wù)器托管、響應(yīng)式網(wǎng)站、域名注冊、建站公司、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)