美文网首页
[Sass]进行手机端适配

[Sass]进行手机端适配

作者: 泉落云生 | 来源:发表于2018-07-10 15:29 被阅读110次
@mixin remCalc($property, $values...) {
  $max: length($values);//返回$values列表的长度值
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-units(nth($values, $i));//返回$values列表中的第$i个值,并将单位值去掉
    $browser-default-font-size: strip-units($browser-default-font-size);
    $pxValues: #{$pxValues + $value * $browser-default-font-size}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-units(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 

  #{$property}: $pxValues; 
  #{$property}: $remValues; 
}

//使用时SCSS
.wrapper {
    @include remCalc(width,45);
    @include remCalc(margin,1,.5,2,3);
}

//生成的CSS
.wrapper {
  width: 720px;
  width: 45rem;
  margin: 16px 8px 32px 48px;
  margin: 1rem 0.5rem 2rem 3rem; }

相关文章

  • [Sass]进行手机端适配

  • 记一次前端技术分享(移动端相关概念讲解)

    移动端开发中的相关概念讲解 1、移动端自适配方案 移动端如何根据不同手机尺寸进行页面的适配 rem 自适应和 vw...

  • 移动端总结

    移动端技巧总结 对移动端开发和适配的技巧总结,主要从适配和注意事项两方面进行总结 1.媒介查询 2. 手机端加一个...

  • 移动端rem适配

    1.移动端适配使用技术 . sass . 单位rem 2.移动端设计稿转px 一般的移动端设计稿都是 750/13...

  • 前端技能

    css (flex布局 移动端自适应适配 css3动画 css预处理器less/sass) js (re...

  • 微信小游戏屏幕适配

    作者: 何永峰;标签: 屏幕适配 屏幕适配 适配都是老生常谈,移动端要根据手机屏幕适配,PC端也有时候根据不同的...

  • LayaAir屏幕适配

    LayaAir屏幕适配 官方教程链接:LayaAir实战开发11-屏幕适配 屏幕适配 随着移动端设备(手机、平板、...

  • 使用Flexible实现移动端页面的终端适配

    前几天讲了一个通过sass和gulp来实现的一个移动端适配方法,也许有一部分同学并没有学过sass,也不会gulp...

  • React 配置 rem (移动端适配)

    移动端适配方案介绍 在移动端中,为了设配不同的设备,通常使用rem来做适配。 rem是通过根元素进行适配的,网页中...

  • Flutter实践--屏幕适配

    前言 做移动端开发的小伙伴都知道,针对不同型号和尺寸的手机要进行页面适配,且Android和iOS适配方案各不相同...

网友评论

      本文标题:[Sass]进行手机端适配

      本文链接:https://www.haomeiwen.com/subject/mfzfpftx.html