响应式布局如何测试不同分辨率

 

转载请注明出处:  响应式布局如何测试不同分辨率→木木夕互联网(http://www.erik.xyz/)

最近在做响应式布局适应不同分辨率的屏幕,太痛苦了,摸着石头过河。之前没有做过这块,手机端又不是很在行,ipad/iphone/三星……一大堆不同的屏幕,如何测试呢,总不能买一大堆设备吧。

偶然间发现谷歌浏览器(最新版)可以缩小来实现,这样又有问题了,分辨率是多少呢?发现新方法了,废话不多说了,直接上教程。

1.在谷歌浏览器打开你要测试的网页按键盘F12,打开网页调试

响应式布局如何测试不同分辨率_第1张图片

 

2.点击调试工具右上角形似菜单的图标

响应式布局如何测试不同分辨率_第2张图片

3.这时候你会发现紧挨着浏览器底部有一排英文菜单

响应式布局如何测试不同分辨率_第3张图片

 

4.把菜单往上拉出来,点击第三个菜单

响应式布局如何测试不同分辨率_第4张图片

5.点击打开菜单下面的手机标示

响应式布局如何测试不同分辨率_第5张图片

 

6.如此便是手机设计效果


 响应式布局如何测试不同分辨率_第6张图片

7.有2个地方可以选择不同的分辨率及屏幕对应的像素

响应式布局如何测试不同分辨率_第7张图片

 

8.下次打开就直接点击F12,然后左上角的手机标示就可以切换

响应式布局如何测试不同分辨率_第8张图片

转载请注明出处:  响应式布局如何测试不同分辨率→木木夕互联网(http://www.erik.xyz/)


你可能感兴趣的:(响应式布局如何测试不同分辨率)