要实现网站内容在不同设备屏幕尺寸下的自适应展示，可以采用响应式网页设计技术。这种技术通过CSS3媒体查询、弹性布局和图片自适应等方法，使网页能够根据设备屏幕尺寸动态调整布局和样式，确保在不同设备上都能提供良好的浏览体验。

CSS3媒体查询

CSS3媒体查询是响应式网页设计的核心技术。通过使用@media规则，可以根据不同的屏幕尺寸应用不同的CSS样式。例如：

@media  {
    .container {
        width: 100%;
    }
}
@media  {
    .container {
        width: 80%;
    }
}

这样，当屏幕宽度小于600px时，容器宽度为100%；当屏幕宽度大于600px时，容器宽度为80%，从而实现不同屏幕尺寸下的自适应布局。

弹性布局

弹性布局是另一种重要的响应式设计技术。通过使用flex容器和flex项目，可以创建灵活的布局结构，使元素能够根据可用空间自动调整大小和位置。例如：

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item {
    flex: 1 1 300px;
    margin: 10px;
}

这样，容器内的项目会根据可用空间自动调整大小，并在必要时换行，从而适应不同屏幕尺寸。

图片自适应

为了确保图片在不同屏幕尺寸下都能良好显示，可以使用CSS属性实现图片自适应。例如：

img {
    max-width: 100%;
    height: auto;
}

这样，图片的最大宽度会设置为100%，高度会自动调整，避免图片变形或超出容器边界。

viewport元标签

在HTML头部添加viewport元标签可以控制网页在移动设备上的显示方式。例如：

这行代码的作用是设置网页宽度默认等于设备屏幕宽度，初始缩放比例为1.0，确保网页在移动设备上能够全屏显示且不被缩放。

综合示例

        

            
标题1
            
内容描述...
        
        

            
标题2
        
        

            
标题3