【亚洲必赢官网】js漏洞修补,漏洞修补

Taobao flexible.js 漏洞修补:记三次 rem 踩坑记录

2017/07/14 · CSS ·
rem

原稿出处: 陈建芳   

原标题:天猫商城flexible.js漏洞修补

取那样的标题大概会被打,然则作者真正顺带消除了天猫flexible.js的主题素材。

先证明八个变量供下文使用:

【亚洲必赢官网】js漏洞修补,漏洞修补。JavaScript

//html style font-size docElementFontSize =
document.documentElement.style.fontSize; //html 最终的 font-size
finalDocElementFontSize =
window.getComputedStyle(window.document.documentElement).getPropertyValue(“font-size”)

1
2
3
4
5
//html style font-size
docElementFontSize = document.documentElement.style.fontSize;
 
//html 最终的 font-size
finalDocElementFontSize = window.getComputedStyle(window.document.documentElement).getPropertyValue("font-size")

rem是遵照html的终极font-size进行响应: 1rem ===
finalDocElementFontSize
(珍视!)
。对于诸多机型,docElementFontSize和finalDocElementFontSize是格外的,不过多少网页在好几情状下打开的话,会拿走docElementFontSize和finalDocElementFontSize不等于的气象,举例自身公司的金立马克斯和荣耀八机型,在商海上算是比较新的机型,测试数据都以在QQ上演示,公司的土豪APP也会有那种状态。如下图:

亚洲必赢官网 1

小米Max

那是在小米马克斯的QQ开的测试页面
,大佬能够扒网页看js,显示器宽度是3玖三px,html的style.fontSize是3玖.三px(页面宽度分成10等分),然则html最终fontSize是45.1九五px!!!上面设置二个蓝色的box,中度是壹rem,获得的样式高度是肆伍.187伍px!!!看到那很毁三观有木有。笔者在百度和谷歌未有查到关于这么些的此外难点和材质。无人不晓Tmall玩rem玩的飞起,用QQ展开m.taobao.com如下图:

亚洲必赢官网 2

小米Max 淘宝

Taobao在body写了overflow:hidden;width:百分之百;所以页面宽度大于部分隐藏了,再结合笔者测试的首先张图,页面宽度是3九三px,1rem=45.1875px,那10rem就不止了页面宽度。事实确实那样,倘诺设置页面宽度10rem,页面会冒出横向滚动条。
焚薮而田办法也很简短,因为那类非常手机html的style.fontSize、html最后的fontSize和页面成分一rem的值都不对等,可是壹rem和html的末尾fontSize很类似。代码如下

JavaScript

/* * 适用于获取显示屏宽度等分设置html的font-size景况,举个例子 flexible.js库
*/ //总计最后html font-size function modifileRootRem () { var root =
window.document.documentElement; var fontSize =
parseFloat(root.style.fontSize); var finalFontSize =
parseFloat(window.getComputedStyle(root).getPropertyValue(“font-size”));
if(finalFontSize === fontSize) return; root.style.fontSize =
fontSize+(fontSize-finalFontSize) + “px”; } if(typeof window.onload ===
‘function’){ var oldFun = window.onload; window.onload = function(){
oldFun(); modifileRootRem(); } }else{ window.onload = modifileRootRem; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
* 适用于获取屏幕宽度等分设置html的font-size情况,比如 flexible.js库
*/
//计算最终html font-size
function modifileRootRem () {
    var root = window.document.documentElement;
    var fontSize = parseFloat(root.style.fontSize);
    var finalFontSize = parseFloat(window.getComputedStyle(root).getPropertyValue("font-size"));
    if(finalFontSize === fontSize) return;
    root.style.fontSize = fontSize+(fontSize-finalFontSize) + "px";
}
if(typeof window.onload === ‘function’){
    var oldFun = window.onload;
    window.onload = function(){
        oldFun();
        modifileRootRem();
    }
}else{
    window.onload = modifileRootRem;
}

经过docElementFontSize+(docElementFontSize – finalDocElementFontSize)
得到html.fontSize的值。适用这类特异机型的html.fontSize!

本条难点小编专门问了下大漠老师,大佬只是说实行“特定”管理,看天猫商城首页的状态也没搞好很好的拾贰分,不出意外,笔者那是针对那类机型rem布局包容的创始代码!
如有疑问迎接商议研商

1 赞 4 收藏
评论

亚洲必赢官网 3

打听实际的『REM』手机显示器适配rem
作为三个低调的尺寸单位,由于手提式无线电话机端网页的勃兴,在显示器适配中拿走重用。

问询实际的『REM』手机显示屏适配

2016/11/22 · CSS · 4
评论 ·
rem

最初的文章出处:
hbxeagle   

rem
作为1个低调的长度单位,由于手提式有线电话机端网页的起来,在显示屏适配中获得重用。使用
rem
前端开采者能够很便利的在各类荧屏尺寸下,通过等比缩放的方法完毕设计图供给的成效。

rem 的合法概念『The font size of the root
element.』,即以根节点的字体大小作为基准值实行长度总计。一般感到网页中的根节点是
html 成分,所以选取的格局也是因此设置 html 元素的 font-size
来做显示器适配,但实在意况真有诸如此类轻易吗?

率先我们来探视使用 rem 落成手提式无线电话机显示器适配的常用方案。

以设计稿的宽窄为640px,即:designWidth = 640,同时设定在640px屏宽下
1rem=100px ,即:rem2px = 100

设置 1rem=100px
的长处由此可见。前端开拓者在切图、重构页面包车型大巴时候,通过平昔位移小数点的措施,就能够将UI图中度量到的
px 值换算成对应的 rem 值,方便快速。

此外,在 head
中大家还安装了:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
viewport
的效应很重大,但不是本文的要紧所以不开始展览,有意思味的同学能够活动物检疫索。

先来探望实际方案:

亚洲必赢官网,下边几个方案来自同事共享,原理都是使用等比缩放的主意 ——
得到目的显示器宽度和设计稿宽度的比,作为 rem
的基值(缩放周密),设置为html标签的字体大小。分化的只是在于质量取舍和书写习贯。

取那样的标题大概会被打,可是笔者确实顺带化解了天猫flexible.js的难点。
  ———————7.14更新 start—————————
  确实被打脸了,爆发那种景况是因为安卓局地webview修改了暗中认可字体,导致壹rem和html.fontSize不1致。想当然感觉依据屏幕宽度设置html的书体,会和默许字体非亲非故。最后代码贴的代码依旧管用的。祝好!
  ———————7.14更新 end—————————
  先证明七个变量供下文使用:

选用 rem
前端开垦者能够很方便的在各样显示器尺寸下,通过等比缩放的办法落成设计图须求的功能。rem
的合法概念『The font size of the root
element.』,即以根节点的字体大小作为基准值进行长度总括。
貌似以为网页中的根节点是 html 成分,所以选择的法子也是因此设置 html
成分的 font-size
来做显示屏适配,但实际上境况真有那样轻巧吗?首先大家来探视使用 rem
落成手提式有线电话机荧屏适配的常用方案。

方案1

JavaScript

@media screen and (min-width: 320px) {html{font-size:50px;}} @media
screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen
and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and
(min-width: 400px) {html{font-size:62.5px;}} @media screen and
(min-width: 414px) {html{font-size:64.6875px;}} @media screen and
(min-width: 440px) {html{font-size:68.75px;}} @media screen and
(min-width: 480px) {html{font-size:75px;}} @media screen and (min-width:
520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px)
{html{font-size:87.5px;}} @media screen and (min-width: 600px)
{html{font-size:93.75px;}} @media screen and (min-width: 640px)
{html{font-size:100px;}} @media screen and (min-width: 680px)
{html{font-size:106.25px;}} @media screen and (min-width: 720px)
{html{font-size:112.5px;}} @media screen and (min-width: 760px)
{html{font-size:118.75px;}} @media screen and (min-width: 800px)
{html{font-size:125px;}} @media screen and (min-width: 960px)
{html{font-size:150px;}}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}
//html style font-size
docElementFontSize = document.documentElement.style.fontSize;

//html 最终的 font-size
finalDocElementFontSize = window.getComputedStyle(window.document.documentElement).getPropertyValue("font-size")

以设计稿的大幅度为640px,即:designWidth = 640,同时设定在640px屏宽下
壹rem=100px ,即:rem二px = 拾0。设置 一rem=十0px
的独到之处总之。前端开采者在切图、重构页面包车型大巴时候,通过一贯位移小数点的措施,就可以将UI图中衡量到的
px 值换算成对应的 rem 值,方便急忙。其它,
在 head 中我们还安装了:<meta name=”viewport”
content=”width=device-width, initial-scale=一.0, minimum-scale=壹.0,
maximum-scale=一.0″ /> viewport
的功力很要紧,但不是本文的第二所以不进行,有意思味的同校可以自动物检疫索。

方案2

JavaScript

@media screen and (min-width: 320px) {html{font-size:312.5%;}} @media
screen and (min-width: 360px) {html{font-size:351.5625%;}} @media screen
and (min-width: 375px) {html{font-size:366.211%;}} @media screen and
(min-width: 400px) {html{font-size:390.625%;}} @media screen and
(min-width: 414px) {html{font-size:404.2969%;}} @media screen and
(min-width: 440px) {html{font-size:429.6875%;}} @media screen and
(min-width: 480px) {html{font-size:468.75%;}} @media screen and
(min-width: 520px) {html{font-size:507.8125%;}} @media screen and
(min-width: 560px) {html{font-size:546.875%;}} @media screen and
(min-width: 600px) {html{font-size:585.9375%;}} @media screen and
(min-width: 640px) {html{font-size:625%;}} @media screen and (min-width:
680px) {html{font-size:664.0625%;}} @media screen and (min-width: 720px)
{html{font-size:703.125%;}} @media screen and (min-width: 760px)
{html{font-size:742.1875%;}} @media screen and (min-width: 800px)
{html{font-size:781.25%;}} @media screen and (min-width: 960px)
{html{font-size:937.5%;}}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}

rem是基于html的终极font-size举行响应: 1rem ===
finalDocElementFontSize
(注重!)
。对于大多数机型,docElementFontSize和finalDocElementFontSize是万分的,不过有个别网页在好几意况下展开的话,会拿走docElementFontSize和finalDocElementFontSize不对等的状态,举个例子自身小卖部的金立马克斯和荣耀八机型,在商场上算是相比新的机型,测试数据都以在QQ上演示,公司的土豪APP也会有那种情景。如下图:

先来探望实际方案:上面七个方案来自同事共享,原理都以应用等比缩放的艺术
—— 获得目的显示屏宽度和设计稿宽度的比,作为 rem
的基值(缩放周详),设置为html标签的字体大小。
今非昔比的只是在于品质取舍和书写习于旧贯。

方案3

JavaScript

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = ((window.innerWidth /
designWidth) * rem2px) + ‘px’;

1
2
3
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize =
  ((window.innerWidth / designWidth) * rem2px) + ‘px’;

小米Max

方案1
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

方案4

JavaScript

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = ((((window.innerWidth /
designWidth) * rem2px) / 16) * 100) + ‘%’;

1
2
3
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize =
  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + ‘%’;

为了轮更制度止明白上的紊乱,笔者在上头js的代码中加了 ( )
,实际代码中是不供给的。

详细分析一下,rempx 间接的调换公式能够写为:

JavaScript

1rem = 1 * htmlFontSize

1
1rem = 1 * htmlFontSize

htmlFontSizehtml 成分的字体大小。

首先来看方案第11中学,在屏宽为640px状态下的装置:

JavaScript

@media screen and (min-width: 640px) {html{font-size:100px;}}

1
@media screen and (min-width: 640px) {html{font-size:100px;}}

能够很明朗的显现出那点 1rem = 1 * 100px
,同大家最初的设定。那么我们要得到别的显示器尺寸的 htmlFontSize
值要怎么做。很简短如方案三,因为大家的施用等比缩放的主意适配,所以总结目的显示器宽度和设计稿的上涨的幅度的比就可以:

JavaScript

window.innerWidth / designWidth * rem2px + ‘px’

1
window.innerWidth / designWidth * rem2px + ‘px’

由于浏览器暗许字体大小为 16px,所以当大家采纳比例作为根节点 html
的字体大小时,即html元素的font-size值设置为一个百分比率,rem
的计量方法就会改为:

JavaScript

defaultFontSize = 16px 1rem = 1 * htmlFontSize * defaultFontSize

1
2
defaultFontSize = 16px
1rem = 1 * htmlFontSize * defaultFontSize

如方案第22中学,在屏宽为640px动静下的设置:

JavaScript

@media screen and (min-width: 640px) {html{font-size:625%;}}

1
@media screen and (min-width: 640px) {html{font-size:625%;}}

选取方面包车型地铁公式:

JavaScript

1rem = 1 * 625% * 16px 其中:625% * 16 = 6.25 * 16 = 100 所以:1rem
= 1 * 100px

1
2
3
1rem = 1 * 625% * 16px
其中:625% * 16 = 6.25 * 16 = 100
所以:1rem = 1 * 100px

1律的能够得到全体荧屏大小下,htmlfont-size
值的总括公式,即为方案4:

JavaScript

window.innerWidth / designWidth * rem2px / 16 * 100 + ‘%’

1
window.innerWidth / designWidth * rem2px / 16 * 100  + ‘%’

通过方案3和方案四的公式,就足以很有益的变通方案壹和方案第22中学的css。

此处只交给了方案三和方案四对应表达页面(方案1和方案二是它们的变形):
scheme3.html,
scheme4.html

如上面两张图,是在屏宽为360px下的成效,通过测算目的为:1rem = 56.25px。方案3设置值为:56.25px,方案四设置值为:351.5625%

方案3 方案4

到近期为止貌似很周密的消除了难题,实际境况当然是出新了意外。在有点
Android 手机上,浏览器或 webview
的默许字体是随着系统设置的字体制改善变的。那样就会导致私下认可字体大于或低于
16px

修改默许字体大小后,大家再看方案3和方案4。

一如既往在屏宽为360px下,大家调大系统字体大小,如上边包车型大巴效果

设置前 html 成分的字体大小的计算值18px ,设置后的计算值
65px ,由于显示屏宽度未有改换,我们的目的值,即我们在 html
成分上安装的 font-size 值也一直不成形任然为
56.25px,而最终计算值出现了错事。

方案3 方案4

剖析偏差前,先来看在360px屏宽下,方案③和方案四的总括进程:

方案3:

JavaScript

document.documentElement.style.fontSize = 56.25px htmlFontSize = 56.25px
1rem = 1 * htmlFontSize = 56.25px 实际为: 1rem = 64.6875px

1
2
3
4
5
document.documentElement.style.fontSize = 56.25px
htmlFontSize = 56.25px
1rem = 1 * htmlFontSize = 56.25px
实际为:
1rem = 64.6875px

方案4:

JavaScript

document.documentElement.style.fontSize = 351.5625% htmlFontSize =
351.5625% defaultFontSize = 18px 1rem = 1 * htmlFontSize *
defaultFontSize = 351.5625% * 18px = 63.28125px 351.5625% * 18 =
63.28125 实际为: 1rem = 64.6875px

1
2
3
4
5
6
7
document.documentElement.style.fontSize = 351.5625%
htmlFontSize = 351.5625%
defaultFontSize = 18px
1rem = 1 * htmlFontSize * defaultFontSize = 351.5625% * 18px = 63.28125px
351.5625% * 18 = 63.28125
实际为:
1rem = 64.6875px

诚如方案四的持筹握算结果很周边实效,而方案三偏差十分的大。再来相比方案三和方案四的计算公式:

JavaScript

// 方案3 document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px + ‘px’; // 方案4
document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px / 16 * 100 + ‘%’;

1
2
3
4
5
6
7
// 方案3
document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px + ‘px’;
 
// 方案4
document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px / 16 * 100 + ‘%’;

方案4较于方案三实际上多除了贰个1陆,可以估摸浏览器在总结 rem
的求实值时,假若 html 设置的 font-sizepx 值时会先除以 16
,然后再乘以 htmlFontSize

JavaScript

1rem = 1 * (56.25px / 16) * 18 1 * (56.25 / 16) * 18 = 63.28125

1
2
1rem = 1 * (56.25px / 16) * 18
1 * (56.25 / 16) * 18 = 63.28125

方案肆留存难题,是因为系统的暗许字体制改进为了 18px
,不过大家在总括比例是时候,照旧以 16px
为基准值进行总结,所以出现错误(总括值和实际值之间还有少数错误这几个在背后会提到)。

而在方案三中,大家其实是不思量浏览器私下认可字体大小的,但在实际上利用的进度中,浏览器照旧除了
16 ,而此时暗中认可字体大小为 18px。得出如下在 htmlfontSize
设置为 px 的事态下 rem 的总结公式为:

JavaScript

1rem = 1 * (htmlFontSize / 16) * defaultFontSize

1
1rem = 1 * (htmlFontSize / 16) * defaultFontSize

在系统安装的字体大小发生转移时,defaultFontSize 会跟着变动,而 16
不会转移。所以方案三固然外表上不考虑暗中认可字体大小的调换,只关切荧屏与设计稿之间的幅度比,但在实质上计算中照旧采用到了默许字体大小,而且还有2个不改变的
16 在添乱,导致方案叁功亏一篑。

所谓的「root element」其实不是想象的那样,1个是16,一个是18,到底取的是丰硕
root element 的字体大小。

ok,rem 的乘除的时候,px
的章程会有三个16不随系统字体大小退换,所以我们使用百分比的方案,绕开这么些标题。

应用百分比的方案4因为在测算时写死了暗中同意字体大小
16px。所以它的不是在于没能动态的获得默许字体大小。更新如下:

方案4.1

JavaScript

var designWidth = 640, rem2px = 100; var h =
document.getElementsByTagName(‘html’)[0]; var htmlFontSize =
parseFloat(window.getComputedStyle(h, null)
.getPropertyValue(‘font-size’)); document.documentElement.style.fontSize
= window.innerWidth / designWidth * rem2px / htmlFontSize * 100 + ‘%’;

1
2
3
4
5
6
7
var designWidth = 640, rem2px = 100;
var h = document.getElementsByTagName(‘html’)[0];
var htmlFontSize = parseFloat(window.getComputedStyle(h, null)
                                    .getPropertyValue(‘font-size’));
 
document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px / htmlFontSize * 100 + ‘%’;

意义如下图:

16px 的图中,设置后的 htmlfont-size1rem
的骨子里值有差错,同时 6.4rem
的总结值也有偏差。通过翻看代码发掘htmlfont-size应用的是:
getPropertyValue('font-size')1rem
使用的是getPropertyValue('width'),偏差出在计算 font-size
的时候浏览器进行了四舍5入。rem
定义中的另八个要素「font size」也不能够按字面意思使用,公布失守。

18px 中的偏差,以及上文中方案4在 18px
实际值和总括值出现的不是都以均等的主题材料。所以基准值还须求修改。

16px 18px

在立异1版,方案肆.二:

JavaScript

var designWidth = 640, rem2px = 100; var d =
window.document.createElement(‘div’); d.style.width = ‘1rem’;
d.style.display = “none”; var head =
window.document.getElementsByTagName(‘head’)[0]; head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d,
null).getPropertyValue(‘width’)); d.remove();
document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px / defaultFontSize * 100 + ‘%’;

1
2
3
4
5
6
7
8
9
10
var designWidth = 640, rem2px = 100;
var d = window.document.createElement(‘div’);
d.style.width = ‘1rem’;
d.style.display = "none";
var head = window.document.getElementsByTagName(‘head’)[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue(‘width’));
d.remove();
document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + ‘%’;

效果如下图:

16px 18px

到此结束,rem 在暗中认可字体不是 16px
的情况下的管理已经减轻,思考到还有设计显示屏旋转,最后手提式有线电话机端的化解方案为:

JavaScript

function adapt(designWidth, rem2px){ var d =
window.document.createElement(‘div’); d.style.width = ‘1rem’;
d.style.display = “none”; var head =
window.document.getElementsByTagName(‘head’)[0]; head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d,
null).getPropertyValue(‘width’)); d.remove();
document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px / defaultFontSize * 100 + ‘%’; var st =
document.createElement(‘style’); var portrait = “@media screen and
(min-width: “+window.innerWidth+”px) {html{font-size:”+
((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +”%;}}”;
var landscape = “@media screen and (min-width: “+window.innerHeight+”px)
{html{font-size:”+
((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +”%;}}”
st.innerHTML = portrait + landscape; head.appendChild(st); return
defaultFontSize }; var defaultFontSize = adapt(640, 100);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function adapt(designWidth, rem2px){
  var d = window.document.createElement(‘div’);
  d.style.width = ‘1rem’;
  d.style.display = "none";
  var head = window.document.getElementsByTagName(‘head’)[0];
  head.appendChild(d);
  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue(‘width’));
  d.remove();
  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + ‘%’;
  var st = document.createElement(‘style’);
  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
  st.innerHTML = portrait + landscape;
  head.appendChild(st);
  return defaultFontSize
};
var defaultFontSize = adapt(640, 100);

回过头来再看 rem 的定义,『The font size of the root
element.』。大家感到的 root element —— html
其实还有个黑影在作祟,而笔者辈认为的 font-size 其实是个近似值。

1 赞 9 收藏 4
评论

亚洲必赢官网 4

  那是在vivo马克斯的QQ开的测试页面
,大佬能够扒网页看js,显示屏宽度是3九三px,html的style.fontSize是3玖.三px(页面宽度分成10等分),但是html最终fontSize是四伍.19⑤px!!!下边安装贰个青蓝的box,中度是一rem,得到的体裁中度是四五.187伍px!!!看到那很毁3观有木有。作者在百度和谷歌(Google)从不查到关于那个的别样难点和资料。无人不晓Tmall玩rem玩的飞起,用QQ展开m.taobao.com如下图:

方案2
@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}

小米Max 淘宝

方案3
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = ((window.innerWidth /
designWidth) * rem2px) + ‘px’;方案4var designWidth = 640, rem2px =
100;
document.documentElement.style.fontSize = ((((window.innerWidth /
designWidth) * rem2px) / 16) * 100) + ‘%’;

天猫商城在body写了overflow:hidden;width:百分之百;所以页面宽度当先部分隐藏了,再组成本人测试的第3张图,页面宽度是3玖三px,一rem=四伍.187伍px,那10rem就超越了页面宽度。事实当真那样,倘使设置页面宽度10rem,页面会油但是生横向滚动条。
  解决方式也非常粗略,因为那类极度手提式有线电话机html的style.fontSize、html最终的fontSize和页面成分一rem的值都不对等,可是一rem和html的终极fontSize很相近。代码如下

为了更制止驾驭上的糊涂,笔者在上头js的代码中加了 ( )
,实际代码中是不须求的。详细分析一下,rem 和 px
直接的转变公式能够写为:一rem = 壹 * htmlFontSizehtml
FontSize 为 html 成分的字体大小。

/*
* 适用于获取屏幕宽度等分设置html的font-size情况,比如 flexible.js库
*/
//计算最终html font-size
function modifileRootRem () {
    var root = window.document.documentElement;
    var fontSize = parseFloat(root.style.fontSize);
    var finalFontSize = parseFloat(window.getComputedStyle(root).getPropertyValue("font-size"));
    if(finalFontSize === fontSize) return;
    root.style.fontSize = fontSize+(fontSize-finalFontSize) + "px";
}
if(typeof window.onload === 'function'){
    var oldFun = window.onload;
    window.onload = function(){
        oldFun();
        modifileRootRem();
    }
}else{
    window.onload = modifileRootRem;
}

第二来看方案第11中学,在屏宽为640px场所下的设置:
@media screen and (min-width: 640px) {html{font-size:100px;}}
能够很扎眼的呈现出那点 1rem = 一 * 拾0px ,同我们最初的设定。
那就是说大家要收获任何显示屏尺寸的 htmlFontSize 值要如何做。

透过docElementFontSize+(docElementFontSize – finalDocElementFontSize)
得到html.fontSize的值。适用那类特异机型的html.fontSize!

很粗大略如方案叁,因为我们的运用等比缩放的方法适配,所以总结目的荧屏宽度和设计稿的小幅度的比就可以:window.innerWidth
/ designWidth * rem二px + ‘px’由于浏览器暗中同意字体大小为
1陆px,所以当大家应用比例作为根节点 html
的字体大刻钟,即html成分的font-size值设置为多个百分比率,rem
的测算办法就会改为:defaultFontSize = 1陆px一rem = 1 * htmlFontSize *
defaultFontSize

以此主题素材自个儿特意问了下大漠老师,大佬只是说实行“特定”管理,看天猫商城首页的情事也没办好很好的相称,不出意外,小编那是指向那类机型rem布局包容的创始代码!
如有疑问迎接切磋探究

如方案2中,在屏宽为640px动静下的装置:@media screen and (min-width:
640px) {html{font-size:6百分之二十五;}}
应用方面包车型客车公式:1rem = 1 * 625% * 16px其中:625% * 16 = 6.25 * 16 =
100所以:1rem = 1 * 十0px一样的能够收获全数显示屏大小下,html 的
font-size 值的计算公式,

即为方案4:window.innerWidth / designWidth * rem2px / 16 * 100 +
‘%’通过方案三和方案四的公式,就可以很便利的更换方案一和方案第22中学的css。
这边只交付了方案三和方案肆对应辨证页面(方案壹和方案二是它们的变形):
scheme三.html, scheme四.html
如下边两张图,是在屏宽为360px下的功效,通过总括目的为:一rem = 5陆.25px。

方案三设置值为:5陆.25px,
方案肆设置值为:35一.56②五%
到近日结束貌似很圆满的减轻了难题,实况当然是出现了意外。在有点
Android 手机上,浏览器或 webview
的暗中同意字体是随着系统安装的字体制改正变的。这样就会导致私下认可字体大于或小于
1陆px。修改私下认可字体大小后,大家再看方案叁和方案四。
1如既往在屏宽为360px下,我们调大系统字体大小,如上面包车型地铁职能设置前 html
成分的字体大小的计算值为 1八px ,设置后的总括值为 陆五px
,由于荧屏宽度未有更动,大家的靶子值,即我们在 html 成分上安装的
font-size 值也未尝变动任然为 5陆.贰伍px,而最后总计值出现了错误。
分析偏差前,先来看在360px屏宽下,方案3和方案4的计量进度:
方案3:
document.documentElement.style.fontSize = 56.25px
htmlFontSize = 56.25px
1rem = 1 * htmlFontSize = 56.25px实际为:1rem = 64.6875px

方案4:document.documentElement.style.fontSize = 351.5625%
htmlFontSize = 351.5625%
defaultFontSize = 18px
1rem = 1 * htmlFontSize * defaultFontSize = 351.5625% * 18px =
63.28125px351.5625% * 18 = 63.28125
实际为:1rem = 64.6875px
一般方案肆的盘算结果很周边实效,而方案三偏差十分大。
再来相比方案三和方案四的总结公式://
方案3
document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px + ‘px’;
方案4
document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px / 16 * 100 + ‘%’;
方案四较于方案三实在多除了二个1陆,能够揣测浏览器在总括 rem
的现实性值时,假如 html 设置的 font-size 为 px 值时会先除以 16,然后再乘以 htmlFontSize。壹rem = 1 * (56.25px / 16) * 181 * (56.25 /
16) * 1捌 = 陆三.28125方案四留存难点,是因为系统的暗中认可字体制改良为了 1八px
,但是我们在总括比例是时候,依旧以 1陆px
为基准值进行测算,所以出现偏差(计算值和实际值之间还有一些偏向这么些在末端会涉及)。
而在方案3中,大家实际是不惦记浏览器暗中认可字体大小的,但在骨子里运用的历程中,浏览器依然除了
1陆 ,而那时候暗中认可字体大小为 1八px。
汲取如下在 html 的 fontSize 设置为 px 的景观下 rem 的总计公式为:壹rem =
一 * (htmlFontSize / 16) *
defaultFontSize在系统装置的字体大小爆发更换时,defaultFontSize
会跟着变动,而 1陆不会扭转。所以方案三虽说表面上不思虑默许字体大小的扭转,只关心显示屏与设计稿之间的增进率比,但在实际计算中要么接纳到了暗中认可字体大小,而且还有3个不改变的
1陆 在无中生有,导致方案三受挫。
所谓的「root
element」其实不是想象的那样,1个是16,一个是18,到底取的是十分 root
element 的字体大小。
rem 的企图的时候,px
的艺术会有一个1陆不随系统字体大小改换,所以大家选择百分比的方案,绕开这一个标题。
利用百分比的方案四因为在总结时写死了暗中同意字体大小 1陆px。
为此它的差错在于没能动态的获取暗中同意字体大小。
更新如下:方案四.
1var designWidth = 640, rem2px = 100;
var h = document.getElementsByTagName(‘html’)[0];
var htmlFontSize = parseFloat(window.getComputedStyle(h, null)
.getPropertyValue(‘font-size’));
document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px / htmlFontSize * 100 + ‘%’;
意义如下图:1陆px 的图中,设置后的 html 的 font-size 与 壹rem
的实在值有过错,同时 6.4rem
的总结值也有错误。通过翻看代码开掘html的font-size使用的是:

getPropertyValue(‘font-size’) 而 壹rem 利用的是
getPropertyValue(‘width’),偏差出在计算 font-size
的时候浏览器举办了四舍五入。
rem 定义中的另二个成分「font size」也无法按字面意思使用,发表失守。
1八px 中的偏差,以及上文中方案四在 1八px
实际值和总结值出现的偏向都以1致的难题。所以基准值还须求修改。1陆px
1捌px
在立异1版,方案四.贰:
var designWidth = 640, rem2px = 100;
var d = window.document.createElement(‘div’);
d.style.width = ‘1rem’;d.style.display = “none”;
var head = window.document.getElementsByTagName(‘head’)[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d,
null).getPropertyValue(‘width’));
d.remove();document.documentElement.style.fontSize = window.innerWidth /
designWidth * rem2px / defaultFontSize * 100 + ‘%’;
效益如下图:16px 1八px 到此停止,rem 在暗中同意字体不是 1六px
的情景下的拍卖已经缓和,思量到还有设计荧屏旋转,最终手提式有线电话机端的化解方案为:
function adapt(designWidth, rem2px){ var d =
window.document.createElement(‘div’);
d.style.width = ‘1rem’;
d.style.display = “none”;
var head = window.document.getElementsByTagName(‘head’)[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d,
null).getPropertyValue(‘width’));
d.remove(); document.documentElement.style.fontSize = window.innerWidth
/ designWidth * rem2px / defaultFontSize * 100 + ‘%’;
var st = document.createElement(‘style’);
var portrait = “@media screen and (min-width: “+window.innerWidth+”px)
{html{font-size:”+
((window.innerWidth/(designWidth/rem2px)/defaultFontSize)100)
+”%;}}”;
var landscape = “@media screen and (min-width: “+window.innerHeight+”px)
{html{font-size:”+
((window.innerHeight/(designWidth/rem2px)/defaultFontSize)
100)
+”%;}}”
st.innerHTML = portrait + landscape;
head.appendChild(st);
return defaultFontSize};
var defaultFontSize = adapt(640, 100);
回过头来再看 rem 的概念,『The font size of the root
element.』。我们认为的 root element —— html
其实还有个黑影在作祟,而我们认为的 font-size 其实是个近似值。

网站地图xml地图