本文介绍了一种将PSD文件中的元素尺寸转换为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单位，我遇到了页面先放大再缩小为正常的尺寸的事故。这种页面打开用户的体验效果大打折扣。
所以我想到了一个简单的解决方法：
先隐藏页面的显示，先判断页面是否加载完成，完成后才显示代码
扫一扫
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
