移动端自适应灵活的 射流研究…的使用方法（不用三大框架,仅写一个单超文本标记语言页面使用)推荐

第一步：

下载flexible.js，代码如下，可以复制过去用

；（函数(win，lib){ var doc=win。文档var docEl=doc。文档元素var metaEl=doc。query selector(' meta[name=' viewport ']')var flexibell=doc。query selector(' meta[name=' flexible ']')var DPR=0 var scale=0 var tid var flexible=lib。灵活| |(lib。flexible={ })if(metaEl){ console。警告('将根据已有的自指的标签来设置缩放比例)var match=metael。GetAttribute(' content ').匹配(/initial\-scale=([\d\).])/)if(match){ scale=parseFloat(match[1])DPR=parseInt(1/scale)} } else if(flexibell){ var content=flexibell。getattribute(' content ')if(content){ var initialDpr=content。匹配(/initial \-DPR=([\ d \).])/)var maximumDpr=content。匹配(/maximum \-DPR=([\ d \ .])/)if(initialDpr){ DPR=parseFloat(initialDpr[1])scale=parseFloat((1/DPR).toFixed(2))} if(maximumDpr){ DPR=parseFloat(maximumDpr[1])scale=parseFloat((1/DPR).toFixed(2)) } } } if(！dpr！scale){ var是andoid=win。领航员。appversion。match(/Android/gi)var isIPhone=win。领航员。appversion。match(/iphone/gi)var device pixel ratio=win。devicepixel比率if(isIPhone){//iOS下，对于2和3的屏，用2倍的方案，其余的用一倍方案if (devicePixelRatio=3(！DPR | | DPR=3)){ DPR=3 } else if(device pixel ratio=2(！DPR | | DPR=2)){ DPR=2 } else { DPR=1 } } else {//其他设备下，仍旧使用一倍的方案DPR=1 }比例=1/DPR }多西尔。SetAttribute(' data-DPR '，dpr) if(！metaEl){ metaEl=doc。createelement(' meta ')metaEl。设置属性(“名称”、“视口”)metaEl。设置属性('内容'，'初始比例='比例'，最大-比例尺='比例尺'，最小-scale=' scale '，user-scale=no ')if(docel。first elementchild){ docel。第一个元素孩子。append child(MetaEl)} els { var wrap=doc。createelement(' div ')换行。appendchild(metaEl)文档。写(包装。innerhtml)} }函数refresrem(){ var width if(width/DPR 540){ width=540 * DPR } var rem=width/10 docel。风格。font size=rem ' px '灵活。rem=win。rem=rem } win。addeventlistener(' resize '，function(){ clear time out(tid)tid=setTimeout(refresh rem，300) }，false)win。addeventlistener(' page show '，function(e){ if(e . persisted){ clear time out(tid)tid=setTimeout(refresh rem)function(e){ doc。尸体。风格。font size=12 * DPR ' px ' }，false)}刷新rem()。灵活。DPR=赢。DPR=DPR。刷新rem=刷新rem灵活。rem2px=函数(d){ var val=parseFloat(d)*这个。rem if(类型为d==' string ' d . match(/rem $/){ val=' px ' } return val }灵活。px rem=函数(d){ var val=parseFloat(d)/函数第二步：

在index.html中引入

项目结构

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '/！-去掉meta，交给灵活的。射流研究…自动处理- !-meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '/-meta http-equiv=' X-UA-Compatible ' content=' ie=edge '/title document/title script src=' http :/js/灵活。js '/脚本链接rel='样式表href=' ./CSS/index。CSS ' rel='外部无跟随'/head body div class=' wrap ' div class=' title '首页/div /div /body/html第三步

写较少的转换

需要安装轻松一点插件，帮助我们把较少的转成钢性铸铁

由于使用较少，所以预先定义了变量@ font-size-base : 75；为了保存标注稿的基准字号，淘宝flexible.js基于750px设计稿

，所以@font-size-base是75；

然后，例如，你测量高度： 98px；然后使用height : 98 rem/@ font-size-base；进行转换

@ font-size-base : 75；html，body { margin : 0；padd : 0；}.包装{ //宽度： 100%；标题{ width : 100%；height : 98 rem/@ font-size-base；line-height : 98 rem/@ font-size-base；color: # fff背景# e02222文本对齐：中心；font-size : 32 rem/@ font-size-base；}}第四步

看效果

以上是边肖介绍的移动adaptive flexible.js的使用方法的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！