[分享]css写一个响应式正方形

响应式设计已经成为现代网页设计的新趋势，让网站的布局不仅可以在桌面端良好展示，还可以适应移动端设备的屏幕尺寸。在实现响应式布局时，CSS则是重要的工具之一。下面我们来看如何使用 CSS 来实现一个简单...

响应式设计已经成为现代网页设计的新趋势，让网站的布局不仅可以在桌面端良好展示，还可以适应移动端设备的屏幕尺寸。在实现响应式布局时，CSS则是重要的工具之一。下面我们来看如何使用 CSS 来实现一个简单的响应式正方形。

.square{
    width: 100%;
    max-width: 300px;
    position: relative;
    padding-top: 100%;
    /*正方形的高度由上面的 padding-top 决定*/
    background-color: #f3f3f3;
}
.square::before{
    content: "";
    display: block;
    padding-top: 100%;
}
/*上面的伪元素会撑开容器的高度，这样才能让内容垂直居中对齐*/
.square > div{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #333;
    color: #fff;
    text-align: center;
    font-size: 18px;
    /*调整字体大小等样式*/
} 

这段 CSS 代码的实现思路其实很简单：在一个宽度为100%的容器中，通过设置 padding-top 为 100% 来实现一个正方形。然后利用绝对定位和伪元素的方式来让正方形的内容垂直居中对齐。

通过添加 max-width 属性，我们可以让正方形的最大宽度为 300 像素，这样可以避免在大屏幕设备上正方形过大，而在小屏幕设备上出现内容不全的问题。

在实际应用中，我们可以将正方形作为页面中的卡片、按钮等元素，提高页面的美观程度，并且因为响应式设计，可以适应各种不同的屏幕大小和设备类型。