有人可以帮我为网站设计一个响应式网站吗？

Question

我正在为客户设计一个订购鸡肉的网站。我设计了它并且在桌面上运行良好。我尝试在移动设备上进行测试，但效果不佳。我尝试添加标签，并以百分比而不是 CSS 文件中的像素来设置宽度，并尝试在移动设备上测试它，但没有获得响应能力。有我不知道的快速修复方法吗？有人可以帮助我吗？我刚刚了解到，在设计网站时，我必须首先为移动设备进行设计，并计划在我的下一个项目中这样做。

这是我正在谈论的网站的链接。您可以通过“查看页面源代码”选项查看代码。

我尝试添加标签，并以百分比而不是CSS文件中的像素来设置宽度，并尝试在移动设备上测试它，但没有获得响应能力。

Answer 1

简单的答案是使用媒体查询来调整网站的布局和样式以适应不同的屏幕尺寸，特别是移动设备等较小的屏幕。它们能够创建响应式设计，确保跨各种设备的最佳用户体验。

例如 - 当屏幕尺寸小于 600px 时，下面的代码会将 font-size 设置为 14px。

@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

虽然媒体查询提供了一种响应能力的方法，但使用一些前端库（例如 bootstrap）将帮助您更好。它的许多组件都采用开箱即用的响应式设计，并将根据当前的屏幕尺寸进行缩放。