首页 > 移动平台 > 详细

vw实现移动端自适应页面

时间:2017-12-24 19:37:51      阅读:257      评论:0      收藏:0      [点我收藏+]

一、设备支持情况

测试网站: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实现移动端自适应页面

原文:http://www.cnblogs.com/camille666/p/vw_autoadapt.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!