vw实现移动端自适应页面

一、设备支持情况

测试网站：https://caniuse.com/#search=vw

css3test：https://airen.github.io/css3test/，https://github.com/airen/css3test

1、PC端

vw实现移动端自适应页面

2、mobile端

vw实现移动端自适应页面

二、vw的不足

1、vw和px混用时会溢出

当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响布局效果。对于类似这样的现象，我们可以采用相关的技术进行规避。比如将margin换成padding，并且配合box-sizing。只不过这不是最佳方案，随着将来浏览器或者应用自身的Webview对calc()函数的支持之后，碰到vw和px混合使用的时候，可以结合calc()函数一起使用，这样就可以完美的解决。

2、有些机型不支持

可以采用csspolyfill进行降级处理，推荐Viewport Units Buggyfill

三、vw需知

vw是基于Viewport视窗的长度单位，视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。

在CSS Values and Units Module Level 3中和Viewport相关的单位有四个，分别为vw、vh、vmin和vmax。

1、vw

是Viewport's width的简写,1vw等于window.innerWidth的1%；
2、vh

是Viewport's height的简写，1vh等于window.innerHeihgt的1%；
3、vmin

vmin的值是当前vw和vh中较小的值；
4、vmax

vmax的值是当前vw和vh中较大的值；
5、计算

100vw = 750px，即1vw = 7.5px。

四、vw的使用

1、把px转化为vw，vh
在代码中写px，借助插件postcss-px-to-viewport转化为vw。
安装后，进行参数配置

"postcss-px-to-viewport": {
  viewportWidth: 750,
  viewportHeight: 1334,
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
}

2、容器的长宽比缩放
推荐插件postcss-aspect-ratio-mini。安装后，直接使用如下，不用配置。

.aspect-box {
  position: relative;
}

.aspect-box {
  aspect-ratio: '16:9';
}

会看到编译结果

.aspect-box {
  position: relative;
}

.aspect-box:before {
  padding-top: 56.25%;
}

3、1px的处理方案
安装postcss-write-svg插件。
方案A、border-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;
}

方案B、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");
}

秒客网

vw实现移动端自适应页面

相关文章