要按比例调整大小以适应屏幕,可以使用CSS的媒体查询和缩放属性。以下是一个示例:
HTML代码:
CSS代码中,padding-bottom属性设置了容器的高度为宽度的75%,创建了一个4:3的比例。.box类设置了容器的宽度为100%,高度为0,position:relative创建了一个相对定位的容器。
.content类设置了内容的位置为绝对定位,填充整个容器,创建了一个灰色的背景。
标签是为了确保网页在移动设备上正确显示,并根据设备宽度进行缩放。
这样,在不同的屏幕尺寸下,容器和内容都会按比例调整大小以适应屏幕。
下一篇:按比例调整SVG背景图大小