"自适应网站切图" 这个术语可能有点误导，因为它通常不是这样称呼的。在网页设计和开发中，我们通常说 "自适应设计" 或 "响应式设计"。自适应设计是指网站能够根据不同的设备屏幕大小和分辨率自动调整布局和内容，提供最佳的用户体验。这通常是通过媒体查询（media queries）和灵活的布局实现的。

如果你是在询问如何将一个网站的UI设计转换为适合不同设备屏幕的HTML和CSS代码，那么这个过程通常包括以下几个步骤：

1. **设计阶段**：
- 创建原始设计文件，通常是使用Photoshop、Sketch或Figma等工具。
- 设计时考虑到不同设备屏幕的尺寸，比如手机、平板电脑和桌面电脑。

2. **切图阶段**：
- 将设计文件中的元素切分成独立的图像文件，比如PNG或JPG。
- 为不同的设备屏幕尺寸准备多套图像，这通常涉及到创建不同分辨率和大小的图片。

3. **开发阶段**：
- 使用HTML和CSS构建网站的结构和样式。
- 使用媒体查询来为不同的设备屏幕尺寸设置特定的样式规则。
- 确保网站的内容和功能在所有设备上都能正常显示和操作。

4. **测试阶段**：
- 在真实的设备上测试网站，以确保自适应设计的有效性。
- 检查网站在不同浏览器和操作系统上的兼容性。

这个过程通常需要设计师和开发者的紧密合作，以确保设计意图在所有设备上都能得到忠实的实现。在实际的开发中，我们通常会使用CSS框架如Bootstrap、Foundation或自定义的响应式布局来简化这个过程。

如果你是在询问如何将一个现有的网站转换为自适应设计，那么这可能涉及到重新设计UI、重写HTML和CSS，以及确保网站的后端代码能够支持不同的设备。这通常是一个比较复杂的过程，需要对网站的现有代码和结构有深入的了解。