yzmcms图片自适应代码_基于 Sass 组织自适应代码

9e7a429dc72effee7552161a9a9bfae9.gif

自适应目前已经是很多项目的标配了,查看各种开源框架都可以发现类似的代码,那么背后的原理是什么呢?在不引入外部 CSS 模块的情况下,我们又该如何去实现自己的自适应模块呢?以下是我的一些实践。

CSS 中,通过 @media 属性来实现屏幕宽度查询,其原始代码如下:

.autoScreen {
  background-color: #ffffff; // 背景色为 #ffffff
}

@media (min-width: 576px) {
  .autoScreen {
    background-color: #aaaaaa; // 当屏幕宽度大于 576px 时,背景色为 #aaaaaa
  }
}

@media (min-width: 1024px) {
  .autoScreen {
    background-color: #000000; // 当屏幕宽度大于 1024px 时,背景色为 #000000
  }
}

如此书写的麻烦在于需要不停的记忆各种像素的大小,那么借助 Sass 我们就可以写出更表意的写法:

$mobile-width: 0;
$pad-width: 576px;
$pc-width: 1024px;

@mixin mobile {
  @media (min-width: $mobile-width) {
    @content;
  }
}

@mixin pad {
  @media (min-width: $pad-width) {
    @content;
  }
}

@mixin pc {
  @media (min-width: $pc-width) {
    @content;
  }
}

.autoScreen {
  background-color: #fff;
  width: 100%;
  height: 100%;

  @include pad {
    background-color: #aaa;
  }

  @include pc {
    background-color: #000;
  }
}

这样在个人项目中,css代码将会被更好的组织起来,如果有更多宽度的屏幕区别,也可以使用很多框架中使用的诸如 sm md lg 等来表达宽度。

相关链接

Sass教程 Sass中文文档 | Sass中文网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值