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

文章标签
max-width

2 篇文章
{
,

}
文章的直接链接:Manuel Matuzovic:max() 的技巧
逻辑属性 边距 max 最大宽度

Manuel Matuzovic:max() 的技巧

由 Manuel Matuzović 的一篇帖子 提供,该帖子是来自 Temani Afif 的演示。

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

阅读 Manuel 对 ... 的分解,你会发现它很有帮助。

Avatar of Geoff Graham
Geoff Graham 于 2022 年 10 月 18 日
文章的直接链接:使用 CSS Clamp 创建更灵活的包装器实用程序
clamp 最大宽度 响应式

使用 CSS Clamp 创建更灵活的包装器实用程序

我喜欢 Andy 的想法

.wrapper {
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

通常我会在那里设置一个 max-width,但正如 Andy 所说

这在中等尺寸的视口中会成为一个小问题,例如

...
Avatar of Chris Coyier
Chris Coyier 于 2021 年 2 月 18 日

CSS-Tricks 由 DigitalOcean 提供支持。

关注 web 开发动态

通过我们手工制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律声明
  • 获取免费信用额度!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告!
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.