Seesponsive

交互式查看网站布局如何响应屏幕宽度变化。 简介 Seesponsive 是一款简单的 Google Chrome 扩展程序，可让您查看网站布局和设计如何随可用屏幕宽度变化而响应式调整。它还会显示逐渐匹配或不再匹配、从而驱动这些变化的媒体查询。 使用方法 要使用此扩展程序，只需浏览使用媒体查询的网站，然后点击工具栏中的扩展程序操作按钮。几秒钟后，页面顶部会出现一个黑色操作栏，包含 Shrink 和 Grow 两个按钮。 点击按钮可缩小或扩大网站宽度，模拟设备宽度的变化。在此过程中，操作栏会显示特定宽度下哪些媒体查询正在匹配或不再匹配。 要查看使用媒体查询进行响应式适配的网站示例，请访问 Media Queries（http://mediaqueri.es/）。 注意：Media Queries 网站与此扩展程序没有任何关联，也不为其背书。它只是一个非常实用的网站，我在截图中使用它纯粹是为了演示。 已知问题 有时加载消息可能不会消失，并出现错误弹窗。这是目前已知的间歇性问题。通常重新加载页面并重试即可解决。 源代码 此扩展程序采用 MIT 许可证开源。详情和代码请参阅 GitHub 项目： https://github.com/devilishio/seesponsive