• 【微信小程序】rpx尺寸单位的应用


    前言:微信小程序中的rpx尺寸单位用起来很方便。他是怎么实现计算的呢?(这里要注意的是,常规浏览器解析css代码的时候会把font-size小于12px的字体转成12px,不会让他小于12px的,而微信小程序的字体是可以小于12px的)。

    一、rpx的应用。

    .testDiv { 300rpx; height:200rpx; line-height:200rpx; background:#ccc; font-size:36rpx; text-align:center;
    <view class='testDiv'>
    hello world
    </view>
    在宽度为750px像素设备下的运行效果:

    在宽度为414px像素设备下的运行效果:

    在宽度为375px像素设备下的运行效果:

    该testDiv的宽度是设置为300rpx,高是设置为200rpx,而font-size是设置为36rpx。在宽度为750px像素设备下的运行效果与平常设置的px效果无异,在宽度为375px像素设备下的运行效果就缩小了一倍。

    从中不难看出来rpx尺寸单位的运算公式。

    新值 = 值*(设置宽度/750)

    在宽度为414px像素设备下的运算过程:

    300*(414/750) = 165.6;

    200*(414/750) = 110.4;

    36*(414/750) = 19.827;

    在宽度为375px像素设备下的运算过程:

    300*(375/750) = 150;

    200 = 200*(375/750) = 100;

    36 = 36*(375/750) = 18;

  • 相关阅读:
    接口类和抽象类
    生成器和迭代器
    装饰器
    KMP算法(java,c++)
    java EE
    XML
    SQL语法
    单元测试
    JDBC
    SpringCloud
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/10429380.html
Copyright © 2020-2023  润新知