h5适配各种屏幕的方法,h5怎么适应屏幕
方法一：引入淘宝开源的可伸缩布局方案
淘宝开源可扩展布局方案介绍：https://github.com/amfe/lib-flexible(点击此处)
淘宝的其实有点像viewport的，但主要是根据设备对设备的像素比例来设置scale的值，保持viewport device-width始终等于设备的物理像素，并针对屏幕大小动态计算根字体大小，具体来说就是把屏幕分成10等份。这一块也可以直接用js实现，后面会提到。
具体介绍和使用方法，移至github查看，非常详细。
方法二：viewport 的使用
在github中，提到了viewport的使用。感觉这篇文章对viewport的介绍特别详细，包括比例、缩放等属性。虽然文章内容看起来字数不少，但请耐心看完。所有干货都能让你很了解viewport。如果你很着急，请继续阅读摘要图表。
3359/article/149140.htm(点击此处)
关于viewport，这一块直接引用了上面文章的内容，我觉得是最简单直接的总结。
方法三：使用js+viewport动态设置手动适配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-meta name= renderer content= WebKit ！-避免IE使用兼容模式-meta http-equiv= x-ua-compatible content= IE=edge ！-针对手持设备优化，主要针对一些不识别viewport的老浏览器，比如BlackBerry-meta name= hand held friendly content= true ！-微软老浏览器-meta name=移动优化内容= 320 ！- uc强制竖屏-meta name= screen-orientation content= portrait ！- QQ强制竖屏-meta name= X5-orientation content= portrait ！- UC强制全屏-meta name=全屏 content= yes ！- QQ强制全屏-meta name= X5-全屏 content= true ！- UC应用模式-meta name=浏览器模式 content=应用！- QQ应用模式-meta name= X5-page-mode content= app ！-windows phone clicks without highlight-Meta name= ms application-tap-highlight content= no Meta content= telephone=no name= format-detection /Meta= huaban content= nopin /linkrel= icon type= image/x-icon href=/favicon . ico title new tea/title script src=/config . js /script script src= http://RES . wx . QQ . com/open/js/jweixin-1iphone 5中的-1 rem=16px；html font-size=16px=1rem-script//获取手机屏幕宽度let html width=document . document element . client width document . body . client width；Console.log (htmlwidth ，HTML width)//Get HTML Dom element let HTML Dom=document . getelementsbytagname( HTML )[0]；//if(htmlWidth640){//如果大小超过640，字体根全部为16px//html width=640；//console.log (htmlwidth-true ，html width)//}/设置根元素字体大小html DOM . style . font size=html width/40 px ；/脚本/正文/html方法四：根据css的媒体查询动态设置根部html字体大小
html { font-size:625%；/* 10016100%=625% */} @媒体屏幕和（最小宽度：360像素)和（最大宽度：374像素)和（方向：纵向){ html { font-size:703%；} } @媒体屏幕和（最小宽度：375像素)和（最大宽度：383像素)和（方向：纵向){ html { font-size:732.4%；} } @媒体屏幕和（最小宽度：384像素)和（最大宽度：399像素)和（方向：纵向){ html { font-size:750%；} } @媒体屏幕和（最小宽度：400像素)和（最大宽度：413像素)和（方向：纵向){ html { font-size:781.25%；} } @媒体屏幕和（最小宽度：414像素)和（最大宽度：431像素)和（方向：纵向){ html { font-size:808.6%；} } @媒体屏幕和（最小宽度：432像素)和（最大宽度：479像素)和（方向：纵向){ html { font-size:843.75%；}}到此这篇关于详解移动端h5页面根据屏幕适配的四种方案的文章就介绍到这了，更多相关h5移动端根据屏幕适配内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。