你是不是也经常被那些不适配手机屏幕的网站搞得十分苦恼？别急，小编今天就来教你如何将普通网站改造成自适应网站！

1、 首先，你需要对网站的CSS文件进行修改，将所有的像素单位改为相对单位，如%或rem。

2、 接下来，为网站添加媒体查询。这样当用户在不同的设备上访问网站时，网站会根据设备屏幕的大小来加载相应的CSS样式。

3、确保网站元素的大小可以根据屏幕大小自动调整。可以使用CSS Flexbox或Grid来实现这一点。

4、对于图片和视频等媒体资源，使用max-width属性将它们的最大宽度设置为100%，确保它们不会超出屏幕宽度。

5、使用响应式字体，确保字体大小也能够根据屏幕大小自动调整。

6、避免使用固定宽度布局，而应该使用流式布局，让网站能够在不同的屏幕上自适应。

7、使用viewport元标签来设置网页的视口大小，这样可以确保网站在移动设备上呈现的效果更佳。

8、确保网站的导航菜单可以在小屏幕上进行折叠，这样可以为用户提供更好的浏览体验。

9、使用HTML5中的媒体查询，可以针对不同的屏幕大小和分辨率提供不同的媒体资源。

10、最后，通过不断地测试和优化，确保网站在不同的设备上都能够正常显示和操作。

这些就是将普通网站改造成自适应网站的10个步骤，赶紧动手试试吧！