响应式设计主要通过以下几种方式实现自动调整布局和内容的呈现方式：

1. 媒体查询：这是响应式设计的核心技术。通过使用CSS3的媒体查询，开发者可以为不同的设备和屏幕尺寸设置不同的CSS样式。例如，当屏幕宽度小于600px时，可以改变字体大小、隐藏某些元素或调整布局。
2. 弹性布局：CSS3的Flexbox和Grid布局使得元素能够根据可用空间自动调整大小和位置。这使得开发者可以创建更加灵活和自适应的布局。
3. 流式布局：通过百分比宽度、最大宽度和最小宽度等CSS属性，元素可以根据容器的大小自动调整宽度，从而实现流式布局。
4. 视口单位：使用vw、vh、vmin和vmax等视口单位，元素的尺寸可以相对于视口（即浏览器窗口）的大小进行调整。
5. 图像的自适应：使用srcset和sizes属性，可以为不同设备和屏幕尺寸提供不同的图像版本，或者让图像自动调整大小以适应其容器。
6. 字体的自适应：使用rem或em单位，字体大小可以根据根元素（html）或父元素的字体大小进行调整，从而实现字体的自适应。

通过结合使用这些技术，响应式设计可以使网站在不同设备和屏幕尺寸上呈现出最佳的视觉效果和用户体验。