码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-09-30 18:02:50      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:苹果   换算   一个   获取   动态   大小   标签   win   文字   

比如:目前我手中有一张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">

 

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

标签:苹果   换算   一个   获取   动态   大小   标签   win   文字   

原文地址:http://www.cnblogs.com/liuqingxia/p/7615531.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!