1. 默认全屏 在 viewport 的 meta 属性中，添加 viewport-fit=cover 即可。 viewport-fit 默认值为 auto/contain，全屏值为cover，是不是感觉很熟悉？嗯，和 background-size 以及 object-fit…

CSS-in-JS 是一门令人兴奋的新技术，完全不需要 CSS 的 class 名字。它可以充分利用 CSS 的功能直接给你的组件添加样式。不幸的是，它也促使未转义的 props 插入到 CSS 中，将你暴露给注入攻击。 而 CSS 注入攻击是一个 重大的安全隐患。 如果你的网…

現代的 Web 越來越依賴 JavaScript，頁面裏的內容亦會隨着使用者的操作發生變化，我們需要標註出哪些變化必須通知給讀屏軟件，這些需要標註的動態區域便是 Live Regions。

是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，dpr，视口等相关概念，还有响应式…

挺好的

intersectionObserver解决什么问题？ intersectionObserver解决目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"， 比如在web网页开发中，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。 传…

我们知道按新的 HTML 规范，已经不按 inline 和 block 来区分元素类型了。所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含。 需要注意的是，HTML5中的这种元素分类与inline、block没有任何关系，任何…

好，我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上，verticle-algin可以在不同上下文中灵活地对齐元素，以及进行细粒度的控制，不必知道元素的大小。元素仍然在文档流中，因而其他元素可以根据它们大小的变化进行相应的调整。一个有用…

我正在做的项目需要给用户展示大量的图片，常见的灯箱效果（放大缩小等）略显枯燥，我决定让图片的展示效果更有互动性更有趣：当鼠标在图片上移动时让图片随鼠标的移动而倾斜。 这个效果的完成需要同时用到 CSS 与 JavaScript，下面的小教程能帮助你快速的理解。 建议各位先简单了…