文章关键字 ‘@media’

CSS @scope他来了

2024年01月21日,星期日

仙人掌封面图

从名称上看,@scope似乎是实现CSS作用域的,这个讨论了近20年的特性终于是要支持了吗,还是并非如此?

阅读全文…

更符合书写习惯的CSS媒体查询Range语法

2022年10月12日,星期三

仙鹤 封面 占位 水墨

介绍一个更容易记忆与理解的@media设备尺寸媒体查询语法,过去的min-width和max-width可以说再见了~

阅读全文…

介绍2022最期待且已正式支持的CSS container容器查询

2022年09月27日,星期二

封面占位图CSS container

2022年最期待的大杀器CSS特性@container规则和container容器查询Chrome和Safari都已正式支持,来看看其可以做些什么,特性和语法又是什么?

阅读全文…

详解日后定会大规模使用的CSS @layer 规则

2022年05月28日,星期六

封面图-披萨可乐

我话就放在这里了,不出三年,CSS @layer 规则一定会在业界遍地开花,到处使用。

阅读全文…

CSS必学基础:理解CSS中的级联规则

2022年05月22日,星期日

CSS级联封面图

CSS中有两个重要的基础规则,一个是级联(Cascading),一个是继承(Inheritance),本文详细介绍级联规则,理解了级联,就能明白某些看似普通但不解的背后现象的原因。

阅读全文…

你不知道的CSS media查询与用户体验

2021年12月13日,星期一

media与用户体验

本文介绍 4 个很多前端开发不知道的可以提升用户体验的 media 媒体查询语句,希望可以帮到大家的学习。

阅读全文…

为什么HTML <picture>元素很少见人使用?

2021年07月26日,星期一

HTML picture元素详解

HTML <picture>元素还是很实用的,带大家了解下,顺便讲讲为什么这个HTML属性平时项目开发很少见人使用。

阅读全文…

如何使用JS检测用户是否缩放了页面?

2021年02月15日,星期一

页面缩放占位图

本文介绍多种使用JS检测用户是否缩放页面的方法,有的针对PC桌面端浏览器,有的针对mobile移动端浏览器,您会学到不少新的API,以及新颖的实现思路。

阅读全文…

我是如何通过CSS向JS传参的

2020年02月13日,星期四

头图占位图

介绍两种我常用的将CSS媒体查询信息传递给JS的方法,一种是伪元素+content属性发,一种是CSS var自定义属性方法,这样传参有助于降低开发成本,让CSS和JS在一些条件信息上保持一致。

阅读全文…

CSS any-hover any-pointer media查询与交互体验提升

2020年01月17日,星期五

media媒体查询文章头图

大屏的触屏设备访问我们的传统网页的时候,CSS any-hover any-pointer等媒体查询可以极大地提升我们产品的用户体验。

阅读全文…