vw实现移动端自适应页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vw实现移动端自适应页面相关的知识,希望对你有一定的参考价值。

一、设备支持情况

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

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

1、PC端

技术分享图片

2、mobile端

技术分享图片

技术分享图片

二、vw的不足

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

以上是关于vw实现移动端自适应页面的主要内容,如果未能解决你的问题,请参考以下文章

VUE 判断电脑还是手机设备 pc端自适应 移动端rem布局

移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率

使用rem设计移动端自适应页面一(转载)

移动端自适应处理页面布局

移动端自适应rem的设置

用Rem来无脑还原Web移动端自适应的页面