电脑上如何查看h5响应式网站在手机下的效果

响应式，html5，微官网这些词语相信很多人在这两年里看到了不少，因为这几年这些确实是实在的火了一把，从切图网近两年承接的项目数据来看，html5手机端以及响应式项目也已经超越pc项目数量。随着手机终端的使用增多，为移动互联网的推进提供了硬件基础，很多人开始在移动互联网下掘金，而移动互联网掘金与传统互联网不同的最大地方在于，这个时候，你不仅仅是有一个网站这么简单，这个网站还需要在pc，手机，平板下都能够非常的好看。

如果你已经有一个响应式网站，那么如何测试在手机下的效果呢，用手机直接打开测试当然可以，当时让你要测试比较多款的手机，那么这个方法显然是行不通的。所以我们需要了解响应式的原理，才采用一些有效的方法来测试。响应式网站会响应的最新核心技术原理是，通过css3多媒体查询技术（css3 media query）来定义不同宽度下的样式。例如

所以它的实际原理是根据设备的宽度来呈现不同的样式，在pc上，我们只需要简单的拖动浏览器窗口的大小就可以看到响应式的变化。在实际响应式开发中，我们用的工具是firebug，或者chrome插件，如果非开发者，目前也有一些用于测试的在线网站例如跨屏测 ，可以方便你来测试，而它们的实现原理也均是采用控制浏览器宽度这个原理实现的。