手机H5端如何使用rem单位对设计图进行等比例还原

分享一个最好用最简单的关于rem单位定义的JS,并教你如何还原设计图,最初我也一样对rem单位的使用非常迷茫,但后来找到了一堆解决方案,像什么CSS定义,媒体查询定义,臃肿的JS定义,还各种if条件,真的,像屎一样。

其实我之前写过一篇关于rem如何使用的方法,在此再把链接给大家粘一下,下面我就把定义的js粘过来,直接讲使用REM还原设计图的部分,如果大佬您还在迷茫,请看看那篇文章http://www.duanlonglong.com/qdjy/138.html

定义rem的js:  我定义的js 无论屏幕多宽,记住16rem永远是满屏,8rem永远是半屏的宽度。你也可以自己改,js里320除以20等于16rem满屏,你也可以将20改掉,定义16rem是有些道理的,不过不告诉你,哈哈,其实影响不大。
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
};
</script>

关于还原设计图,其实在H5端的开发有一屏页面和长屏页面,一屏页面对设计图是有要求的,要求设计图为750*1206的尺寸,在此不多说关于一屏,只讲还原。

一般一个有常识的UI在设计移动端psd设计图时会将设计图宽度设为750的宽度,如果不是这个宽度,那就要我们自己转一下,如何转百度一下或让UI转一下,我相信一个前端是会简单使用PS的,因为移动端开发我就没用过UI给的图,都是自己切,话又说回来了,他们切图跟屎一样,哈哈。

上回书讲到我定义的rem永远是16rem满屏,也就是16rem就是100%的宽度,设计图750px等于100%的宽度,我们开始换算了,我在ps量了一个50px应该写多少rem呢?

750除以16等于46.875   这个结果就是1rem等于46.875PX,我们量的50px除以46.875等于1.0666666rem.看懂了没,不要傻乎乎的去算,我只是告诉你计算方法,我经常使用hbudierX开发小项目,这个编辑工具里是可以设置rem转换的,需要先在工具设置1rem等于多少px,然后写代码时写50px会出现rem的提示,此时我们直接回车便可将我们写的PX转换成rem,好用吧

阴影什么的怎么还原?下载一个像素大厨,将你的psd放进去,会有惊喜的,在了解其中的奥秘之后,不要变懒,把手写css忘记哦。

手机H5端如何使用rem单位对设计图进行等比例还原

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/168.html