如何做出这种响应式的设计？

响应式设计是一种能够适应不同设备和屏幕尺寸的设计方法，以提供用户友好的体验。下面是实现响应式设计的步骤和方法：

1. 媒体查询（Media Queries）：使用CSS的媒体查询功能，根据不同设备的屏幕尺寸、分辨率和方向等特性来加载不同的样式表。通过设置不同的样式规则，可以调整页面布局、字体大小、图片尺寸等来适应不同的屏幕。
2. 弹性布局（Flexible Layout）：使用相对单位（如百分比、em、rem）和弹性盒模型（Flexbox）等技术来实现灵活的布局。通过设置元素的宽度、高度、边距和位置等属性，可以使页面的各个元素在不同屏幕尺寸下自动调整大小和位置。
3. 图片优化（Image Optimization）：针对不同设备加载适当大小的图片，以减少页面加载时间和带宽消耗。可以使用CSS的background-image属性和<picture>标签结合媒体查询来实现图片的响应式加载。
4. 断点设计（Breakpoint Design）：根据不同屏幕尺寸设置断点，调整布局和样式以适应特定的设备。通常会根据手机、平板和桌面等常见设备的尺寸来设定断点，并在断点处进行调整。
5. 移动优先（Mobile-first Approach）：采用移动优先的设计理念，首先针对小屏幕设备进行设计和开发，然后再逐渐添加适应大屏幕设备的样式和布局。这样可以确保在各种设备上都能提供良好的用户体验。
6. 测试和调试（Testing and Debugging）：在不同设备和浏览器上进行测试，确保页面在各种情况下都能正常显示和使用。可以使用浏览器开发者工具进行模拟和调试，确保页面在不同设备上的兼容性和稳定性。

实现响应式设计需要综合运用前端开发、CSS布局、媒体查询等技术，同时也要考虑用户体验和页面性能优化。以下是腾讯云相关产品和文档，可以帮助实现响应式设计：

1. 腾讯云云服务器（CVM）：提供灵活可扩展的计算资源，用于部署和运行网站和应用程序。链接：腾讯云云服务器
2. 腾讯云对象存储（COS）：用于存储和分发静态资源（如图片、样式表和脚本文件）。链接：腾讯云对象存储
3. 腾讯云内容分发网络（CDN）：提供全球加速和缓存服务，加快网站和应用程序的访问速度。链接：腾讯云内容分发网络
4. 腾讯云云函数（SCF）：使用云函数可以实现后端逻辑的计算和处理，以减轻服务器的负载。链接：腾讯云云函数

请注意，以上仅为示例，并非推荐使用腾讯云产品进行响应式设计的唯一选择。在实际开发中，可以根据具体需求和技术栈选择适合的工具和平台。