html - 使用媒体查询构建响应式 UI

Question

我在某处读到过，当您构建网站并希望使用媒体查询使其具有响应性时，一般惯例是您首先构建移动界面，然后构建桌面浏览器的 UI。为什么首先建议构建桌面 UI？

Answer 1

您指出了移动和桌面界面方法中的一个重要问题。

我同意这一点，但我发现你的桌面 UI 最终会包含太少的功能，因为你在构建网站时考虑了移动浏览器。我以为你先为桌面构建，然后构建一个删除所有不必要功能的移动版本？？

仅仅因为我使用的是移动设备并不意味着我不想要你的 Web 应用程序的完整体验。事实上，这样做可能会让我完全放弃你的 Web 应用程序。

随着越来越多的人通过移动设备访问网站（智能手机和平板电脑属于这一类），您将开始发现一些用户将无法通过任何其他方式访问互联网。如果您可以在智能手机或平板设备上完成所需的一切，为什么还要购买笔记本电脑。

相反，您应该考虑渐进增强来处理您的网络应用程序（或一般网站）。

1. 向移动设备上的用户提供所有 Web 应用程序功能
2. 通过检测设备功能（地理位置、触摸等）尽可能增强功能
3. 增强设计以适应屏幕视口。
4. ？？？
5. 利润

通过向移动界面提供所有功能，您可以确保这也可以通过桌面访问，然后使用媒体查询，您可以确保用户拥有最佳的内容显示和界面，以便根据视口与网站/webapp 进行交互他们目前正在使用。

首先接近移动设备的主要好处之一是速度。您希望确保它尽可能轻，因为移动设备的运行带宽通常比笔记本电脑或台式机少。