基于屏幕适配的vue手机html5页面四大解决方案

最近做了两个关于h5页面与微信官方账号对接的项目。不得不提，打开微信浏览器内置的地图导航功能，真的很恶心。下次记得，总结分享一下怎么处理。在vue移动终端的h5页面中，适配是一个常见的问题，有几种方法可以应用。

方法一：引入淘宝开源可扩展布局方案

介绍淘宝开源可扩展布局方案：https://github.com/amfe/lib-flexible(点击此处)

淘宝的其实有点像viewport的，但主要是根据设备的像素比来设置比例的值，保持viewport的设备-宽度始终等于设备的物理像素，动态计算屏幕大小的根字体大小，具体来说就是把屏幕分成10等份。这个部分也可以直接用js实现，这将在后面提到

具体介绍和使用方法，可以去github详细查看。

方法2:使用视口

Github提到了视口的使用。感觉这篇文章中对viewport的介绍特别详细，包括对scale、scaling等属性的介绍。文章虽然字数很多，但请耐心阅读。所有的干货都能让你熟知视窗。如果你赶时间，请继续往下看总结图

https://www.jb51.net/article/149140.htm

关于viewport，这篇直接引用了上面文章的内容，我觉得也是最简单最直接的总结

方法3:使用js视口动态设置和手动调整rem

我的编辑器是vscode，增加了插件cssrem自动转换

index.html

！DOCTYPE html html head meta charset=' utf-8 '！-meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '-meta name=' viewport ' content=' width=device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scale=no '/！-启用360浏览器的WebKit-元名称='渲染器'内容=' WebKit '！-避免IE使用兼容模式-meta http-equiv=' x-ua-compatible ' content=' IE=edge '！-针对手持设备进行了优化，主要针对一些无法识别viewport的旧浏览器，比如blackberry-meta name='手持友好' content=' true '！-微软的旧浏览器-meta name='移动优化'内容=' 320 '！- uc强制垂直屏幕-meta name='屏幕-方向'内容='纵向'！- QQ强制竖屏-meta name=' X5-方位'内容='人像'！- UC强制全屏-meta name='全屏'内容='是'！- QQ强制全屏-meta name=' X5-全屏'内容=' true '！- UC应用模式-元名称=' browsermode '内容=' application '！- QQ应用模式-元名称=' X5-页面-模式'内容=' app '！- windows phone单击时不突出显示-Meta name=' ms application-tap-highlight ' content=' no ' Meta content=' phone=no ' name=' format-detection '/Meta name=' huaban ' content=' nopin '/link rel=' icon ' type=' image/x-icon ' href='/fav icon . ico ' rel=' external nofollow ' title new tea/title script src=' http :/config . js '/script script src=' http 3:http://8-1 rem=iphone 5中的16pxhtml font-size=16px=1rem-script//获取手机屏幕的宽度让html width=document . document element . client width | | document . body . client width；Console.log ('htmlwidth '，html width)//获取html的Dom元素让html Dom=document . getelementsbytagname(' html ')[0]；//如果(htmlWidth640){//如果字体大小超过640，字体根为16px//HTMlWidth=640；//console.log ('htmlwidth-true '，html width)/}//设置根元素html DOM . style . font size=html width/40 ' px '；/script /body/html方法4:根据css媒体查询动态设置根html字体大小

html { font-size 3: 625%；/* 10016100%=625% */} @媒体屏幕和(最小宽度：360 px)和(最大宽度：374 px)和(方向：人像){ html { font-size : 703%；} } @媒体屏幕和(最小宽度：375 px)和(最大宽度：383 px)和(方向：人像){ html { font-size : 732.4%；} } @媒体屏幕和(最小宽度：384像素)和(最大宽度：399像素)和(方向：人像){ html { font-size : 750%；} } @媒体屏幕和(最小宽度：400 px)和(最大宽度：413 px)和(方向：人像){ html { font-size : 781.25%；} } @媒体屏幕和(最小宽度：414 px)和(最大宽度：431 px)和(方向：人像){ html { font-size : 808.6%；} } @媒体屏幕和(最小宽度：432 px)和(最大宽度：479 px)和(方向：人像){ html { font-size : 843.75%；}}总结

以上所述是小编给大家介绍的某视频剪辑软件移动端html5页面根据屏幕适配的四种解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！