px转rpx
/**
1px对应多少rpx
当前值表示: 1px对应2rpx
典型手机的px与rpx对应关系: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D
**/
$multiple: 2.34rpx;
/*
转换函数 (15) ==> 30rpx (15,30) ==> 30rpx 60rpx
转换函数 params 可传参数 无上限
使用
.title {
width: px2rpx(375); // width:750rpx;
height: px2rpx(10); // height:20rpx;
padding:px2rpx(10,20,30,40); // padding:20rpx 40rpx 60rpx 80rpx;
box-shadow: px2rpx(0,1,16) rgba(56, 56, 71, 0.2); // box-shadow: 0 2rpx 16rpx rgba(56, 56, 71, 0.2);
}
*/
@function px2rpx($t...) {
$i: 1;
$result: 0;
@while $i <=length($t) {
@if($i ==1) {
$result: (
nth($t, $i) * $multiple
);
}
@else {
$result: append($result, (nth($t, $i) * $multiple))
}
$i: $i + 1;
}
@return $result;
}
px转rem
@use 'sass:math';
// html文档中根元素的字体大小
$rootFontSize: 16;
/*
将px转换为rem
e.g.
h1{
// 此时字体大小将被设置为 1.25rem; 1.25rem = 20/16
font-size: px_to_rem(20);
left: calc(50% - #{px_to_rem(321)});
}
@param $px px值(数值). 如: 10, 15
@param $baseFontSize 1rem对应的px大小(数值). 默认为$rootFontSize
@return 带rem单位的值. 如:3rem, 1.25rem
*/
@function px_to_rem($px, $baseFontSize: $rootFontSize) {
@return math.div($px, $baseFontSize) * 1rem;
}
px转vw
@use 'sass:math';
// 设计稿宽度
$vw_base: 1920;
// 设计稿高度
$vh_base: 1080;
/**
px转vw
*/
@function pxToVw($px) {
@return math.div($px, $vw_base) * 100vw;
}
/**
px转vh
*/
@function pxToVh($px) {
@return math.div($px, $vh_base) * 100vh;
}
/**
px转vmin
*/
@function pxToVmin($px) {
@return math.div($px, $vh_base) * 100vmin;
}
/**
px转vmax
*/
@function pxToVmax($px) {
@return math.div($px, $vh_base) * 100vmax;
}
scss vw vh与px换算 - 掘金 (juejin.cn)
css - vw+rem移动端自适应布局 - 越小皓的前端专栏 - SegmentFault 思否
移动端适配方案实践-rem和vw - 掘金 (juejin.cn)
