介绍
使用快速眼动如何适配移动设备?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<强> 1。动态改变html的字体大小值
几乎在每个浏览器都将html的字体大小初始化为16 px,我们动态改变的话可以暂时将16 px设置为快速眼动适配的根节点字体大小初始值。
那么如何进行适配动态修改?
假定设计稿宽度为750 px,我们定义了自己使用1 rem=16 px的单位去布的局,如何适配呢?
在chrome的手机iphone模拟器宽度为375 px,正好为设计稿的一半,我们可以口算:当时的1 rem应该等于初始化时html节点字体大小的一半,即newFontSize=16/2=8 px,这样一半对一半不就适配了吗……
从中得到公式设计稿宽度/16 px=需要适配的设备宽度/8 px,能够看出新的字体大小是参考当前的设备宽度与原设计稿的宽度,进行等比缩放的
最终得到newFontSize=16 px *需要适配的设备宽度/原设计稿宽度
(函数(医生,,赢),{
,var resizeEvt =,,,,,“orientationchange",拷贝window ?,“orientationchange",:,“, resize"
,,,setRemResponse =,()函数,{
,,,,,var vM =, 750;
,,,,,var vfontSize =, 16;
,,,,,var html =, doc.documentElement;
,,,,,var newfontSize =, (vfontSize *, html.clientWidth),/,虚拟机;
,,,,,html.style.fontSize =, newfontSize +,“px";
,,,};
doc.addEventListener才能(“DOMContentLoaded",, setRemResponse,,假);
win.addEventListener才能(resizeEvt, setRemResponse,,假);
})(文档,窗口); <强> 2。实际使用
将测量得出的btn按钮的样式从px转换为快速眼动
.btn {
,,宽度:699 px,,/*, 699/16 =祝辞,43.6875雷姆;*/,,身高:90 px,,/*, 90/16px =祝辞,5.625雷姆;,*/背景:才能,rgba (90,, 173,, 246,, 1);
,,这个特性:6 px;,/*, 6/16=祝辞,0.375雷姆;*/} 自己计算太繁琐,使用scss定义函数代替计算过程
@function pxToRem (initialStyle美元),{
@return 才能;initialStyle/16美元,*,1眼动;
} 那么上面的css改写为:
.btn {
宽度:才能,pxToRem (699);
高度:才能pxToRem (90);
背景:才能,rgba (90,, 173,, 246,, 1);
border - radius才能:pxToRem (6);
} 补充:vscode的插件cssrem支持计算将我们在css, scss中输入的px转换为快速眼动单位,默认设置的字体大小为16 px
<强>计算方法变形,口算rem
<强> 1。简单分析
分析上一节我们最终得到newFontSize=16 px *需要适配的设备宽度/原设计稿宽度
每次计算要除以16很是繁琐,我们若将初始的html根节点字体大小变为方便计算的,反正它最终做为一个除数,变为多少呢?100年是否更为方便呢?对了!
const oHtml =, document.documentElement;
const clientWidth =, oHtml.clientWidth;
var vM =, 750;
var vfontSize =, 100;//,移动设备
oHtml.style.fontSize =, (vfontSize *, clientWidth),/, vM +,“px" 2。实际使用
还是上面熟悉的那个btn,将px转换为快速眼动,口算得出结果。
.btn {
,,宽度:699 px,,/*, 699/100 =祝辞,6.99雷姆;*/,,身高:90 px,,/*, 90/100 =祝辞,0.9雷姆;,*/背景:才能,rgba (90,, 173,, 246,, 1);
,,这个特性:6 px;,/*, 6/100=祝辞,0.06雷姆;*/} 不得不说,有了scss是真的方便!
@function reduced100 (initialStyle美元),{
@return 才能;initialStyle/100美元,*,1眼动;
} 那么上面的css函数方法改写为:
.btn {
宽度:才能,reduced100 (699);
高度:才能reduced100 (90);
背景:才能,rgba (90,, 173,, 246,, 1);
border - radius才能:reduced100 (6);
} 怎么样,rem原来就是这么简单! ! !
<强>工具函数
上面的方法,二选其一就可以了,毕竟现在javascript的执行效率不差!
(函数(医生,,赢),{
,var resizeEvt =,,,,,“orientationchange",拷贝window ?,“orientationchange",:,“, resize"
,,,setRemResponse =,()函数,{
,,,,,var vM =, 750;
,,,,,var vfontSize =, 16;
,,,,,var html =, doc.documentElement;
,,,,,var newfontSize =, (vfontSize *, html.clientWidth),/,虚拟机;
,,,,,html.style.fontSize =, newfontSize +,“px";
,,,};
doc.addEventListener才能(“DOMContentLoaded",, setRemResponse,,假);
win.addEventListener才能(resizeEvt, setRemResponse,,假);
null
