大家都知道CSS已经有@media、@support 查询形式的条件,可以非常灵活地选择对应的样式,然而还有一个新的提议叫做 when/else,这语法似乎看起来更加明了方便。
在这篇文章完稿前,when[1] 的提议已经被 CSSWG 通过了,而 else[2] 是一个单独的提案,目前是一个4级规范
让我们来看看 when/else 是如何使用的吧
when/else 语法
先来看看为了实现页面响应式是如何做的,这就要用到 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时的样式 */ }
更多用法
一起来看看 when/else 有哪些不错的用法~
组合使用
再来举一个 @media 和 @support 共用的例子
@media (min-width: 800px) { @supports (display: flex) { .flex { flex-direction: column; } } }
这段代码的意思是当页面宽度大于 800px 并且浏览器支持 display: flex 语法时,给类名为 flex 的元素设置 flex-direction: column 的样式
其实不难理解,但要是换成 when/else 的语法会是啥样呢?
@when media(min-width: 800px) and supports(display: flex) { .flex { flex-direction: column; } }
内联使用
@when 也可以内联在CSS样式中使用,例如:
button { padding: 2rem; @when element(max-width: 400px) { padding: 1rem; } }
新的媒体查询写法
我在初学 @media 这个语法时也觉得有些拗口,min-width 和 max-width 还是需要稍微思考一下才知道是什么意思,然后有一个有意思的媒体查询写法也想在这里提一下,它的语法感觉挺有意思的,而且特别易懂,写法如下:
@media (width关注打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?