首页 > Web开发 > 详细

Sass/Scss基础——rem与px的自动转换

时间:2019-12-16 12:48:04      阅读:250      评论:0      收藏:0      [点我收藏+]

引入公用css

$browser-default-font-size: 16px !default;
@function pxTorem($px) {
  //$px为需要转换的字号
  @if (unitless($px)) {
    @return pxTorem($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / $browser-default-font-size) * 1rem;
}

在使用时直接

.title {           
  margin-bottom
: pxTorem(18);   padding: 0 pxTorem(20);   img {     height: pxTorem(31);     width: pxTorem(31);   } }

按照常规UI设计图时,如果是px单位,传到pxTorem的除以2,pt单位时,直接按照原来的数值即可

Sass/Scss基础——rem与px的自动转换

原文:https://www.cnblogs.com/yixiancheng/p/12048216.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!