(mobile) { padding: 1rem; } @include respond-to(tablet) { padding: 2rem; max-width : 768px; } @include respond-to(desktop) { padding: 3rem; max-width: 1200px; margin (tablet) { max-width: 400px; } @include respond-to(desktop) { max-width: 350px; } } : 1fr; } @include respond-to(tablet) { grid-template-columns: repeat(2, 1fr); } @include respond-to(desktop) { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } } // 特殊卡片变体
padding: rem(20px) rem(30px); // 0.2rem 0.3rem font-size: rem(28px); // 0.28rem } // 媒体查询 mixin @mixin respond-to min-width: 1024px) { @content; } } } // 使用示例 .responsive-element { width: rem(750px); @include respond-to (tablet) { width: rem(600px); } @include respond-to(phone) { width: rem(375px); } }