基于vw 的移动端适配
基于vw 的移动端适配
目前出视觉设计稿，我们都是使用
[w-369] {
width: 369px;
}
[w-369] h2 span {
background: #ff5000;
color: #fff;
display: inline-block;
border-radius: 4px;
font-size: 20px;
text-shadow: 0 2px 2px #ff5000;
padding: 2px 5px;
margin-right: 5px;
}
[w-369] {
width: 49.2vw;
}
[w-369] h2 span {
background: #ff5000;
color: #fff;
display: inline-block;
border-radius: 0.53333vw;
text-shadow: 0 0.26667vw 0.26667vw #ff5000;
padding: 0.26667vw 0.66667vw;
}
[w-369] h2 span,
[w-369] i {
font-size: 2.66667vw;
margin-right: 0.66667vw;
}
在实际使用的时候，你可以对该插件进行相关的参数配置：
{
"postcss-px-to-viewport": {
"viewportWidth": 750,
"viewportHeight": 1334,
"unitPrecision": 5,
"viewportUnit": "vw",
"selectorBlackList": [],
"minPixelValue": 1,
"mediaQuery": false
}
}
上面解决了
- 容器适配，可以使用
vw - 文本的适配，可以使用
vw - 大于
1px 的边框、圆角、阴影都可以使用vw - 内距和外距，可以使用
vw
1px 问题
前面提到过，对于 1px 是不建议将其转换成对应的 vw 单位的，但在1px 的问题。个人推荐另外一种解决1px的方案。依旧是使用1px 可以使用 postcss-write-svg。
使用border-image或者background-image两种方式来处理。比如：
@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;
}
这样
.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;
}
使用
上面演示的是使用border-image方式，除此之外还可以使用background-image来实现。比如：
@svg square {
@rect {
fill: var(--color, black);
width: 100%;
height: 100%;
}
}
#example {
background: white svg(square param(--color #00b1ff));
}
编译出来就是：
#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");
}
这个方案简单易用，是我所需要的。目前测试下来，基本能达到我所需要的需求。但有一点千万别忘了，记得在中添加：
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
上面阐述的是这个适配方案中所用到的技术点，简单的总结一下：
-
使用
vw来实现页面的适配，并且通过PostCSS 的插件postcss-px-to-viewport把px转换成vw。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写px单位 -
为了更好的实现长宽比，特别是针对于
img、vedio和iframe元素，通过PostCSS 插件postcss-aspect-ratio-mini来实现，在实际使用中，只需要把对应的宽和高写进去即可 -
为了解决
1px的问题，使用PostCSS 插件 postcss-write-svg, 自动生成border-image或者background-image的图片
Viewport 不足之处
采用
另外一点，