js动态适配移动端font-size,单位：rem

比如：目前我手中有一张psd图，大小为640*1010，适配苹果5的手机。

方法步骤：

1.我采用font-size=10px为640*1010手机的初始像素大小； 1rem=10px；

此时psd上有一个文字的大小为20px，即当前我的字体大小用rem表示为：font-size:1rem （psd上的大小为html上大小的2倍，so首先要除以2才能得到正确的px,之后换算rem再次除以2就ok了）

适配各种手机的rem单位：

2.获取我当前使用手机的width: var windowWidth=$(this).innerWidth();

3.比例换算获取当前使用手机的px: windowWidth/M= 320/10 ========= (此时得到M值)

4.将上部得到的x值赋值到当前使用手机页面的html标签里： <html style="font-size:Mpx">

补充：在页面加载的时候，用的rem单位，我遇到了页面先放大再缩小为正常的尺寸的事故。这种页面打开用户的体验效果大打折扣。

所以我想到了一个简单的解决方法：

先隐藏页面的显示，先判断页面是否加载完成，完成后才显示代码

posted @ 2017-09-30 16:47 MiniDuck 阅读(1137) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

YAZI