码迷,mamicode.com
首页 > 移动开发 > 详细

vw实现移动端自适应页面

时间:2017-12-24 20:14:55      阅读:421      评论:0      收藏:0      [点我收藏+]

标签:tar   width   image   一起   strong   设备   blog   air   idt   

一、设备支持情况

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

标签:tar   width   image   一起   strong   设备   blog   air   idt   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!