移动端:UI图px单位转换rem单位的计算方法

Posted 斗破苍穹-毅力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端:UI图px单位转换rem单位的计算方法相关的知识,希望对你有一定的参考价值。

简单说一下 em

em 单位是相对于父元素字体大小来去定的。比方说:

    font-size:12px;
    元素宽度是2em;
    那么实际的宽度是 24px.(具体为什么,可以去查询资料,今天主讲rem)

简单说一下 rem

rem 是相对于根元素(html)字体大小来确定的。比方说:

            宽度            字体
    手机A: 320px            14px

    手机B: 460px             ?
    为了能达到可以同等比的放大缩小,那么,可以进行很简单的运算:?=14*460/320
    得到:?=20.125px; 

UI图上的px转化成实际操作的rem计算方法

  1. 第一步:设计标签的基准值,随意,想定多少定多少。随意定:20px
  2. 第二步:看看UI同事给你的图,宽度是多少?一般UI给图都是会给大一点,因为大图切下来,当屏幕小点,不会失真,但是小图要是放大了,就不太好看了。。。比方说,
    一张图 宽度749px 高度234px;  你的浏览器模拟器以iphone6来定基,也就是宽度为375px;
    那么根据等比例缩放,你的模拟器高度为h=375*234/749=117.1562px
    那么实际的rem的计算值为:
    宽度:375/20 = 18.75rem
    高度: 117.1562/20 = 5.8578rem;
  1. 第三步: 开始进行换算。实际是不同屏幕宽度,只要变换根元素的font-size,即可调整所有的元素宽高显示。而这个,只能通过js来实现
                基准屏幕               真实屏幕
    宽度          375px               clientWidth
            
    字体          20px                ?


    js代码:
    window.onload = function(){
        document.documentElement.style.fontSize = 20*document.documentElement.clientWidth/375 + \'px\'
    }
  1. 第四步:检验你的页面。

题外话

现在有很多可以直接计算rem值的插件,不用你每次宽高都去算一下,不然那样是会活不下去的。具体实现可以看这篇文章https://www.cnblogs.com/jf-67/p/7171830.html

以上是关于移动端:UI图px单位转换rem单位的计算方法的主要内容,如果未能解决你的问题,请参考以下文章

响应式布局-PC端和移动端同时适配

移动端布局方法rem

移动端 单位 rem

前端移动端rem页面怎么写js代码怎么写

移动端适配

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