移动端开发之px2rem

最新推荐文章于 2024-05-05 12:58:21 发布

语记时光

最新推荐文章于 2024-05-05 12:58:21 发布

阅读量862

点赞数

分类专栏：前端文章标签： css 移动端

本文链接：https://blog.csdn.net/qq_30868289/article/details/85857005

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

less实现

@baseWidth: 720px; //设置标注图宽度

.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){

	@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){

	@{atr}: unit(@px*10/@baseWidth , rem);
}



//使用示例

p{
	.px2rem(font-size,32px);
}

p{
	.px2rem(font-size,32px,750px);
}

sass实现


$baseWidth: 	720px !default; //设置标注图宽度

@function px2rem($px,$base-width:0){
	$width : if(unitless($base-width), $baseWidth, $base-width);
	@return $px*10/$width * 1rem;
}

//使用示例

p{
	font-size: px2rem(32px);
}

p{
	font-size: px2rem(32px,750px);
}

postcss-px2rem-exclude

.postcssrc.js
module.exports = {
  'plugins': {
    'postcss-px2rem-exclude': {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
}