when/else

https://www.toutiao.com/i7043574695047905803/?tt_from=mobile_qq&utm_campaign=client_share&timestamp=1645313979&app=news_article&utm_source=mobile_qq&utm_medium=toutiao_ios&use_new_style=1&req_id=202202200739390101411631390C678653&share_token=11B217C0-E49C-4009-A8BE-46D61AC363D5&group_id=7043574695047905803

先来看看为了实现页面响应式是如何做的，这就要用到 CSS媒体查询

@media (min-width: 800px) {  
  /* 宽度大于800px时的样式 */  
}  
@media (max-width: 799px) { 
  /* 宽度小于799px时的样式 */  
} 

而换成 when/else 后呢？

@when media(min-width: 800px) {  
  /* 宽度大于800px时的样式 */  
}  
@else {  
  /* 宽度不大于800px时的样式 */  
} 

语义上比 @media 更加好了

when/else 甚至还能支持多条件判断，跟写 if/else 似的

@when media(min-width: 800px) {  
  /* 宽度大于800px时的样式 */  
}  
@else media(min-width: 600px) {  
  /* 宽度大于600px但不大于800px时的样式 */  
}  
@else {  
  /* 宽度不大于600px时的样式 */  
}