怎样使用最新版谷歌测试响应式页面

今天在打开谷歌浏览器的时候,不小心将其升级了,结果发现,审查元素的页面变了,于是乎,分享给大家。

方法/步骤

首先,将我们自己电脑上的chrome浏览器更新到最新版本,如果还没有安装,就直接下载一个最新版本

然后,我们打开一个响应式的网站,我打开的是bootcss,只有这样才可以测试出效果来嘛

然后我们按下小键盘的F12,调出“开发者工具”的操作页面,然后点击Element左侧的有一个正方形和一个大长方形的选项,会提示“toggle device model”

页面会变小,直接缩成1024px宽度的,并且页面头部会多出一个选项栏,我们点击“responsive”会出现几种手机端尺寸的大小,点击100%会显示,现在相对于预期页面一个比例的页面

我们直接切换成小屏幕后,是没有标尺选项的,我们可以点击右上角的三个黑点后,选中弹出的小菜单中的“show rulers”选项,就会出现标尺

同样是点击黑色的小圆点出现弹出框,然后选择“show media queries”选项,就会出现当前页面的@media中的几个区间

注意事项

以上就是小渔总结的一些google最新的调试响应式页面的方法,

(0)

相关推荐

  • 谷歌Chrome浏览器页面查找

    Chrome浏览器在页面上查找词语的功能怎么使用呢,现在来看看

  • 新版谷歌怎么改语言

    谷歌搜索引擎也是我们搜索资料的重要工具,但是不少用户在使用谷歌搜索的时候回遇到语言问题。有时候默认的语言是英语甚至是日语,给我们搜索带来了一些不必要的麻烦,接下来我就为大家介绍如何修改谷歌的搜索语言

  • 新版谷歌53.0浏览器不能用解决支付宝旺旺插件

    再次更新最近谷歌53.0IE升级,阿里系旺旺插件不能用

  • 新版UC浏览器如何页面搜索

    UC浏览器的页面搜索功能跑哪儿去了?相信很多人都和当初的我一样有这个疑问。

  • 如何将web页面改成响应式

    响应式网页,即随着终端屏幕大小而缩放,显示等比例的视觉效果,无论终端客户是在PC或是移动设备,均能呈现出预想的效果。随着信息化的普及,移动设备越来越占据人们的生活,所以,响应式设计已经成为一种需求和时尚,同一个网页,兼容多种设备已越来越重要。如何将一个Web页面改成响应式设计,请看详细步骤!

  • 安兔兔验机准吗? 安兔兔验机中心新版使用评测

    得益于android系统的开源,如今在android手机市场上出现了多种高仿的假冒智能手机以假乱真,假冒智能手机不论从外观还是操作系统看上去都足以迷惑普通用户,让普通用户难以辨别真伪,鉴于以上安兔兔验机中心的一键验机功能非常的实用。 那么真实的验机状况是怎样的呢?笔者通过身边的几款机型进行测试,小米2顺利通过了验证。由于绿茶小编胖胖身边没有高仿机型,就挑选了几款知名度不高的国产厂商机型进行测试,测试发现虽然“安兔兔验机中心”能够真实的给出手机的参数,但是在验机的时候却会出现“无法联网”的

  • 20款覆盖全面的响应式网站设计工具

    灵活的栅格和布局,响应式的图片和智能的CSS媒体查询,构成了响应式网页的主要特征。当用户扔下沉重的笔记本电脑拿起平板,响应式的网站能够自然而然地随之适配,掏出手机也毫无压力,图片和文字都会随着特定的屏幕和分辨率而调整,这就是它的优势。你以为这就完了?当然不会!在未来,一摸兜里手机忘带了,抬起左手唤醒智能手表,打开网页,也能看! 不得不说,创建响应式网站越来越容易,即使你不是专业的前端也可以轻松搞得定。挑选合适的工具,搜几个符合需求的jQuery插件,配合合理的设计,你也可以实现期待中的响应速度和

  • 响应式网站如何进行测试

    响应式网站以其良好的适配性,正成为前端开发领域的新宠,那么对于响应式网站如何进行测试呢?

  • 如何:轻松玩转新版12306订票网,春节购票吧

    2013年12月06日,铁道公司推出了新版的12306火车票购票网,新版界面更加简洁,功能模块划分更加合理,也新增了不少功能点,更加不可思议地是,新版12306购票网中增加了抢票的功能,这比之前大家选用360浏览器、猎豹浏览器、搜狗浏览器等第三方浏览器来说,这种功能简直是正宗中的正宗了,那么如何快速学会12306新版界面呢,小编和您一起来学习。