如何为网站设计响应式网站？

Question

我正在为客户设计一个订购鸡肉的网站。我设计了它并且在桌面上运行良好。我尝试在移动设备上进行测试，但效果不佳。我尝试添加

<meta>

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

有我不知道的快速修复方法吗？我刚刚了解到，在设计网站时，我必须首先针对移动设备进行设计，并计划在我的下一个项目中这样做。

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

我尝试添加

<meta>

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

Answer 1

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

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

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

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