資訊專欄INFORMATION COLUMN
摘要：年月日最新的大漠老師移動(dòng)端適配方案使用這套方案可以取代首先建議讀者先去學(xué)習(xí)大漠老師的這篇文章看完能有大大的收獲如何在項(xiàng)目中使用實(shí)現(xiàn)移動(dòng)端適配正文開始使用新建項(xiàng)目安裝依賴復(fù)制以下代碼復(fù)制進(jìn)行配置配置
2018年1月25日 11:58:01 最新的大漠老師移動(dòng)端適配方案,
使用這套方案可以取代flexible.js
首先建議讀者先去學(xué)習(xí)大漠老師的這篇文章,看完能有大大的收獲
使用vue-cli新建項(xiàng)目
vue init webpack vue-demo cd vue-demo npm run dev
安裝依賴
復(fù)制以下代碼：
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --S
復(fù)制進(jìn)行 postcssrc.js 配置
.postcssrc.js配置
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": { utf8: false },
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750,
unitPrecision: 3,
viewportUnit: "vw",
selectorBlackList: [".ignore", ".hairlines"],
minPixelValue: 1,
mediaQuery: false
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
各插件的功能：
postcss-px-to-viewport : 將項(xiàng)目中的px轉(zhuǎn)化為vw
"postcss-px-to-viewport": {
viewportWidth: 750, // 視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是750
viewportHeight: 1334, // 視窗的高度，根據(jù)750設(shè)備的寬度來(lái)指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無(wú)法整除）
viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
selectorBlackList: [".ignore", ".hairlines"], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無(wú)限添加,建議定義一至兩個(gè)通用的類名
minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
}
容器適配，可以使用vw
文本的適配，可以使用vw
大于1px的邊框、圓角、陰影都可以使用vw
內(nèi)距和外距，可以使用vw
postcss-px-to-viewport文檔
postcss-write-svg 實(shí)現(xiàn)Retina屏1像素邊框
首先記得在heade頭加入
方式一:
方式二:
最重要的 降級(jí)處理
使用 Viewport Units Buggyfill 插件
在vue項(xiàng)目的index.html文件head標(biāo)簽添加引用
``
``
在Index.html文件body標(biāo)簽后添加以下代碼
最后做個(gè)對(duì)img兼容處理，在全局添加(在main.js 用 Import "@/common/index.css")
img {
content: normal !important;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93645.html
摘要：安裝并配置插件還需要安裝對(duì)進(jìn)行配置找到在根目錄中的，對(duì)插件進(jìn)行配置視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是視窗的高度，根據(jù)設(shè)備的寬度來(lái)指定，一般指定，也可以不配置指定轉(zhuǎn)換為視窗單位 1. 安裝并配置PostCss插件 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cs...
摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動(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...
摘要：是阿里團(tuán)隊(duì)開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實(shí)已經(jīng)能解決前端適配問(wèn)題了，為什么阿里還要開發(fā)一個(gè)呢在第一種方法中，時(shí)沒有任何問(wèn)題，但是在或者更高的手機(jī)屏幕上，因?yàn)槲锢硐袼氐脑黾?，存在小于的顯示空間。 話說(shuō)我剛工作的時(shí)候，就開始用rem了，過(guò)了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...
閱讀 1632·2021-09-08 10:42
閱讀 3617·2021-08-11 10:23
閱讀 3990·2019-08-30 14:10
閱讀 2743·2019-08-29 17:29
閱讀 3099·2019-08-29 12:50
閱讀 651·2019-08-26 13:36
閱讀 3465·2019-08-26 11:59
閱讀 1498·2019-08-23 16:23
