如何在@media (max-width:600px)中缩小.post子元素宽和字号20%？

嘿，这个需求其实有个超级省心的实现方式——直接用CSS的transform: scale()属性就能一次性让.post下所有子元素的尺寸（包括宽度、字体大小）缩小20%，完全不用挨个给子元素写样式！

核心代码示例 #

@media (max-width: 600px) {
  .post {
    /* 缩小到原尺寸的80%，对应需求的"缩小20%" */
    transform: scale(0.8);
    /* 可选：设置缩放原点，避免元素整体偏移 */
    transform-origin: top left;
  }
}

为什么这招好用？ #

• scale(0.8)会统一缩放元素及其所有子元素的视觉尺寸，包括字体大小、宽度、内边距、边框等，完美匹配你的需求；
• 不用遍历所有子元素写重复样式，代码极简；
• 添加transform-origin: top left是为了让缩放从元素的左上角开始，避免默认的中心缩放导致元素整体向页面中心偏移，保持布局的连贯性。

补充说明 #

如果缩放后发现元素占据的空间还是原来的大小（比如周围出现空白），可以加上transform-box: border-box;让缩放基于元素的边框盒计算。另外，如果有个别子元素不想被缩放，只需要给它单独设置transform: scale(1);就能覆盖父元素的缩放效果。

内容的提问来源于stack exchange，提问作者Zorgan