vue中的適配：px2rem

aaron 發(fā)布于2019-08-29 17:18 / 3041人閱讀

摘要：這應(yīng)該是項(xiàng)目在適配移動(dòng)端時(shí)候，最簡(jiǎn)單的方法之一下面是基本步驟使用下載并引入在中引入將添加到在中添加如下配置代碼如下這個(gè)是重點(diǎn)，設(shè)計(jì)稿是完了就可以直接用做單位按照的設(shè)計(jì)稿擼代碼了，

這應(yīng)該是vue項(xiàng)目在適配移動(dòng)端時(shí)候，最簡(jiǎn)單的方法之一
下面是基本步驟（使用cnpm）
1.下載并引入lib-flexible

cnpm install --save lib-flexible

在main.js中：import "lib-flexible/flexible"
2.引入px2rem-loader

cnpm install --save  px2rem-loader

3.將px2rem-loader添加到cssLoaders

在build/util.js中
添加如下配置

代碼如下

 const px2remLoader = {
    loader: "px2rem-loader",
    options: {
      remUnit: 75//這個(gè)是重點(diǎn)，設(shè)計(jì)稿是750px
    }
  }

 const loaders = [cssLoader,px2remLoader]

完了就可以直接用px做單位按照750的設(shè)計(jì)稿擼代碼了，

GPU云服務(wù)器云服務(wù)器 px2rem 適配問(wèn)題機(jī)型適配屏幕適配

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114240.html

相關(guān)文章

vue中的適配：px2rem

摘要：這應(yīng)該是項(xiàng)目在適配移動(dòng)端時(shí)候，最簡(jiǎn)單的方法之一下面是基本步驟使用下載并引入在中引入將添加到在中添加如下配置代碼如下這個(gè)是重點(diǎn)，設(shè)計(jì)稿是完了就可以直接用做單位按照的設(shè)計(jì)稿擼代碼了，這應(yīng)該是vue項(xiàng)目在適配移動(dòng)端時(shí)候，最簡(jiǎn)單的方法之一下面是基本步驟（使用cnpm）1.下載并引入lib-flexible cnpm install --save lib-flexible 在main.js中 ...

libin19890520 2019-08-26 13:22 評(píng)論0 收藏0
vue 使用lib-flexable，px2rem 進(jìn)行移動(dòng)端適配但是引入的第三方UI組件 vu

摘要：最近在寫移動(dòng)端項(xiàng)目就想用，來(lái)進(jìn)行適配把轉(zhuǎn)換成但是也用到了第三方組件庫(kù)把這個(gè)引入發(fā)現(xiàn)一個(gè)問(wèn)題就是的組件都縮小了在網(wǎng)上找不到答案最后在一個(gè)開發(fā)群里找到了解決的方法目前的處理方法是將組件中轉(zhuǎn)化為，避免被轉(zhuǎn)成在中中配置以下代碼自定義的全局最近在寫移動(dòng)端項(xiàng)目,就想用lib-flexable，px2rem來(lái)進(jìn)行適配,把px轉(zhuǎn)換成rem但是也用到了第三方UI組件庫(kù)vux,把這個(gè)引入發(fā)現(xiàn)一個(gè)問(wèn)題就是...

Kyxy 2019-08-02 11:53 評(píng)論0 收藏0
【技術(shù)】移動(dòng)端適配 px2rem/px2vw 的原理與實(shí)現(xiàn)

摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動(dòng)端適配的配置工作。簡(jiǎn)介【目標(biāo)】：前端開發(fā)移動(dòng)端及H5時(shí)候，不需要再關(guān)心移動(dòng)設(shè)備的大小，只需要按照固定設(shè)計(jì)稿的px值布局！【基礎(chǔ)】 dpr（設(shè)備像素比）css的像素px不等于設(shè)備像素/分辨率/各種值，css的px可以簡(jiǎn)單理解為虛擬像素，與設(shè)備無(wú)關(guān)，css的px需要乘dpr計(jì)算為設(shè)備像素； css3 的 rem，即ro...

AlexTuan 2019-08-22 18:41 評(píng)論0 收藏0
移動(dòng)端網(wǎng)頁(yè)布局適配rem方案小結(jié)

摘要：當(dāng)明確規(guī)定根元素的時(shí)，單位以該屬性的初始值作參照。適配具體實(shí)現(xiàn)方案設(shè)計(jì)稿尺寸寬度為，如果設(shè)計(jì)稿是，下邊會(huì)自動(dòng)計(jì)算的值比如，具體的尺寸不用調(diào)整例如，不用調(diào)整，這是一個(gè)比例大小，對(duì)應(yīng)的元素大小值會(huì)根據(jù)新的比如等于改變，從而按照比例適配。前言根據(jù) W3C 規(guī)范中對(duì) 1rem 的定義： 1rem 與等于根元素 font-size 的計(jì)算值。當(dāng)明確規(guī)定根元素的 font-size 時(shí)，rem...

2shou 2019-08-30 15:55 評(píng)論0 收藏0