跳过至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
responsive

34 篇文章
{
,

}
文章 “响应式网页设计十周年” 的直接链接。
响应式

响应式网页设计十周年

Ethan 关于启发这一术语的想法和研究

大约那个时候,我的搭档 Elizabeth 在纽约市参观了 高线公园 ,这是它开业后不久的事。她回来后,告诉我 这些带轮的休闲椅 

…
Avatar of Chris Coyier
Chris Coyier 于 2020 年 5 月 28 日 发布
文章 “将固定尺寸对象转换为响应式元素” 的直接链接
Bootstrap 响应式 transform 单位

将固定尺寸对象转换为响应式元素

我最近遇到了一个情况,我想在网站上展示一部 iPhone。我希望用户能够与这个 “模拟” 手机上的应用程序演示进行交互,因此它必须在 CSS 中渲染,...

Avatar of Philip Kiely
Philip Kiely 于 2020 年 5 月 11 日 发布
文章 “流体宽度视频” 的直接链接
纵横比 响应式 视频

流体宽度视频

在一个充满响应式和流体布局的网络世界中,**一种媒体类型**阻碍了完美的和谐:视频。有许多方法可以在你的网站上显示视频。你可能自己托管了...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 3 月 11 日 发布
文章 “使用最少的 CSS 使表格响应式” 的直接链接
响应式 表格

使用最少的 CSS 使表格响应式

这是 Bradley Taunt 给出的一个很棒的 CSS 技巧,他展示了如何仅用少量代码就能使表格在移动设备上正常工作。他将每个表格行样式化为看起来像这样的卡片:...

Avatar of Robin Rendle
Robin Rendle 于 2019 年 10 月 17 日 发布
文章 “使用 PostCSS 函数来自动化响应式工作流程” 的直接链接
流体字体 字体大小 响应式

使用 PostCSS 函数来自动化响应式工作流程

不久前,你可能遇到了这篇文章,我在文章中描述了如何使用混合器来自动化使用RFS 的响应式字体大小。在最新的版本 `v9` 中,RFS 可以重新缩放...

Avatar of Martijn Cuppens
Martijn Cuppens 于 2019 年 9 月 5 日 发布
文章 “看,没有媒体查询!使用 CSS 网格进行响应式布局” 的直接链接
网格 媒体查询 响应式

看,没有媒体查询!使用 CSS 网格进行响应式布局

CSS 网格不仅重新塑造了我们对 Web 布局的思考和构建方式,而且还促使我们编写更具弹性的代码,取代了我们以前使用的 “hacky” 技术,在某些情况下,还消除了...

Avatar of Juan Martín García
Juan Martín García 于 2019 年 2 月 26 日 发布
文章 “响应式设计和 CSS 自定义属性:构建灵活的网格系统” 的直接链接
CSS 变量 Flexbox 网格 响应式

响应式设计和 CSS 自定义属性:构建灵活的网格系统

上次,我们查看了在响应式设计中声明和使用 CSS 自定义属性 的几种可能方法。在本文中,我们将更深入地了解 CSS 变量以及如何在可复用组件中使用它们,...

Avatar of Mikolaj Dobrucki
Mikolaj Dobrucki 于 2019 年 2 月 26 日 发布
文章 “响应式设计和 CSS 自定义属性:定义变量和断点” 的直接链接
calc CSS 变量 响应式

响应式设计和 CSS 自定义属性:定义变量和断点

CSS 自定义属性 (也称为 CSS 变量) 越来越受欢迎。它们终于获得了不错的浏览器支持,并且正在逐渐进入各种生产环境。自定义属性的流行并非意外,因为...

Avatar of Mikolaj Dobrucki
Mikolaj Dobrucki 于 2019 年 2 月 26 日 发布
文章 “为什么浏览器会下载具有不匹配媒体查询的样式表” 的直接链接
性能 响应式

为什么浏览器会下载具有不匹配媒体查询的样式表

假设你这样链接了一个样式表

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

但当页面加载时,你正在使用屏幕宽度为 1753 像素的桌面浏览器。浏览器应该跳过加载该样式表...

Avatar of Chris Coyier
Chris Coyier 于 2018 年 11 月 12 日 发布
  • 更新
  • 1
  • 2
  • 3
  • ...
  • 4
  • 旧版本

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发的最新动态

使用我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.