新移动端适配
gyh 2019-06-04 css移动端适配
适配项目 demo ，分支 vue2-template
postcss-px-to-viewport(核心)
postcss-import(建议安装)
postcss-viewport-units(建议安装)(Automatically append content property for viewport-units-buggyfill.)
viewport-units-buggyfill(建议安装)
cssnano(非必须)cssnano-preset-advanced(非必须)
postcss-write-svg(1px方案，建议安装)
postcss-url(非必须)
postcss-aspect-ratio-mini(非必须)
postcss-cssnext(废弃，非必须)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced
1
css: {
loaderOptions: {
postcss: {
// 这里的选项会传递给 postcss-loader
plugins: [
require('postcss-import')({}),
require('postcss-url')({}),
require('postcss-aspect-ratio-mini')({}),
require('postcss-write-svg')({ utf8: false }),
require('postcss-cssnext')({}),
require('postcss-px-to-viewport')({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines', 'van'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
require('postcss-viewport-units')({}),
require('cssnano')({
'cssnano-preset-advanced': {
zindex: false,
autoprefixer: false
}
})
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ios 下图片不显示
img {
content: normal !important;
}
1
2
3
2
3
1px 问题 postcss-write-svg postcss-write-svg 插件主要用来处理移动端 1px 的解决方案。该插件主要使用的是 border-image 和 background 来做 1px 的相关处理。比如：
@svg 1px-border {
height: 2px;
@rect {
fill: var(--color, black);
width: 100%;
height: 50%;
}
}
.example {
border: 1px solid transparent;
border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
编译出来的 CSS:
.example {
border: 1px solid transparent;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E")
2 2 stretch;
}
1
2
3
4
5
2
3
4
5
上面演示的是使用 border-image 方式，除此之外还可以使用 background-image 来实现。比如：
@svg square {
@rect {
fill: var(--color, black);
width: 100%;
height: 100%;
}
}
#example {
background: white svg(square param(--color #00b1ff));
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
编译出来就是：
#example {
background: white
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
1
2
3
4
2
3
4
解决 1px 的方案除了这个插件之外，还有其他的方法。
特别声明：由于有一些低端机对 border-image 支持度不够友好，个人建议你使用 background-image 的这个方案。