随着移动互联网的普及，越来越多的用户开始使用手机访问互联网。因此，制作一个既能在电脑上正常浏览，又能在手机屏幕上完美显示的网站变得至关重要。本文将介绍如何创建一个在手机和电脑上都能通用的响应式网站。
一、选择合适的框架和技术
要制作一个响应式网站，首先要选择一个能够适应多设备的前端开发框架。例如，Bootstrap、Foundation等都是非常流行的响应式设计框架。它们提供了一系列预设的样式和组件，可以帮助开发者快速构建适应不同屏幕尺寸的网站。
二、使用媒体查询实现样式适配
媒体查询（Media Queries）是CSS3中的一种功能，它可以根据不同的设备特性应用不同的CSS样式。通过媒体查询，可以轻松地为桌面设备和移动端设备设置不同的布局和样式。例如，当屏幕宽度小于某个值时，可以设置导航菜单变为垂直排列，图片大小调整等。
@media (max-width: 768px) {
.navbar {
flex-direction: column;
}
.image {
width: 100%;
height: auto;
}
}
三、采用弹性布局
在响应式网站设计中，使用弹性布局可以使页面元素根据屏幕尺寸自动缩放。常用的弹性布局方式包括：百分比宽度、Flexbox布局和Grid布局。这些布局方式能够帮助网页元素在不同设备上保持良好的展示效果。
使用Flexbox布局来创建一个灵活的导航栏：
<nav class="navbar">
<a href="#" class="logo">Logo</a>
<div class="links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</nav>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
四、优化图片和多媒体内容
为了提高网站的加载速度和用户体验，需要对图片和多媒体内容进行优化。可以使用CSS属性background-size和object-fit来控制图片的缩放和裁剪方式。另外，还可以使用懒加载技术，仅在需要时才加载图片和视频资源。
<img src="image.jpg" loading="lazy" alt="Descriptive text">
五、测试和调试
完成网站的开发后，一定要在多种设备和浏览器上进行全面的测试。可以使用浏览器的开发者工具模拟不同设备的视图，确保网站在各种情况下都能正常运行。如果发现问题，及时进行调整和优化。
制作一个手机和电脑通用的网站需要选择合适的框架和技术，利用媒体查询、弹性布局等手段实现响应式设计，并优化图片和多媒体内容。同时，不要忘记进行全面的测试和调试，以保证网站在各类设备上的兼容性和用户体验。