响应式布局之px像素--rem和rpx

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/byg184244735/article/details/80198882

bootstrap中响应式布局涉及到的一个很重要的容器—grid,依靠强大的media来选择性的使用已设置的样式(sm-手机,md-电脑平板,lg-大屏幕)。响应式布局还涉及到像素大小,如remrpx
rem是由w3c设计的,是根据根元素(root element,html)的字体大小计算,bootstrap已使用rem
rpx是为微信小程序设计的,原则是把屏幕等分成750份,每一份的大小即是1rpx。

以上两种方式均可实现适配不同屏幕尺寸。

微信小程序中暂时无法使用bootstrap的媒体功能,但替代方案是使用微信官方推出的rpx。

为方便简单记忆,通常单位转换关系可约等于如下:
1rem = 16px(将px转换为rem转换关系:将px值/16)
1rpx = 0.5px(将px转换为rpx转换关系:将750/屏幕宽度,然后再乘以px值)

微信小程序中对rem的转换较特殊,1rem = 屏幕宽度/20,即一般1rem = 40px

一句话抽象描述像素大小顺序:rpx—>px—>rem

猜你喜欢

转载自blog.csdn.net/byg184244735/article/details/80198882
今日推荐