为CSS设计宽高比单元

Rachel Andrew说，CSS工作组在最近的一次会议上设计了一个长宽比单元。我们的想法是找到一个优雅的解决方案，当我们希望根据元素的宽度计算元素的高度时，反之亦然。例如，我们有一个网格布局，其中一行元素应保持一个正方形（1:1）的比例。我们可以采用一些现有但不太理想的方法： - 定义一个显式维度。如果我们定义网格中项目的高度，但在模板列上使用一个固有值（例如，auto-fill），那么当容器响应浏览器视口时，我们就不再知道元素的宽度。元素会增长和挤压，但永远不会保持完美的正方形。 - 定义明确的尺寸。当然，我们可以告诉元素200像素宽和200像素高，但是当添加到项目中的内容超过空间时会发生什么？现在我们有一个溢出问题。 - 使用padding hack。元素的块级别（从上到下）填充百分比由元素的内联宽度计算，我们可以用它来计算高度。但是，正如瑞秋所说，这是完全不直观和难以维护的。 - 克里斯写了一个完整的可能的方法来保持长宽比，但没有一个是优雅的CSS工作组提出的解决方案：.box {width: 400px;height: auto;aspect-ratio: 1/1;}看到了吗？具有纵横比单位的aspect-ratio属性将基于width属性的值来计算元素的高度。或者，对于列设置为auto-fill的网格布局：.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}.item {aspect-ratio: 1/1;}非常酷！但这项提议将何去何从呢？aspect-ratio包含在CSS尺寸4规范的草稿中。如果您有想法或建议，请在CSSWG GitHub repo中创建一个问题。或者，就像瑞秋建议的那样，评论一下她那篇轰动一时的杂志文章，甚至写下你自己的文章，一起发出去。这是一个为可能的新功能添加声音的好机会。直接链接→

为CSS设计宽高比单元

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么