3/12

为您的设计
寻找专业的前端切图服务。

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

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

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

1111

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