vue移动端html5页面根据屏幕适配的方法有哪些

这篇文章主要介绍“vue移动端html5页面根据屏幕适配的方法有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue移动端html5页面根据屏幕适配的方法有哪些”文章能帮助大家解决问题。

　　方法一：引入淘宝开源的可伸缩布局方案

　　引入淘宝开源的可伸缩布局方案：

　　淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分。这块也可以直接用js实现，后面会提到

　　具体引入和使用方法，移步github查看，非常详细。

　　方法二：viewport 的使用

　　github里边，有提到  viewport 的使用。我感觉这篇文章关于viewport 的介绍特别详细，包括比例、是否缩放等的属性介绍特别的详细，虽然文章的内容一大片的字看起来很多，但是请耐心看完，都是干货能很好的让你认识viewport。如果比较着急，请继续往下看总结图吧

　　关于 viewport 的，这块直接引用上面文章的内容，我感觉也是最干脆最直接的总结了吧

　　方法三：使用js+viewport动态设置手动适配rem

　　我的编辑器是vscode,添加了插件cssrem自动转

　　方法四：根据css的媒体查询动态设置根部html字体大

关于“vue移动端html5页面根据屏幕适配的方法有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。