大家好,今天小编来为大家解答以下的问题，关于谷歌浏览器标尺，谷歌浏览器标尺怎么设置这个很多人还不知道，现在让我们一起来看看吧！

本文目录

1. 怎样使用最新版谷歌测试响应式页面
2. 谷歌浏览器像素和标尺测量的不同

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

1、用最新版本的chrome浏览器打开nicebox上的任意一个响应式网站，按下小键盘的F12，调出“开发者工具”的操作页面，然后点击Element左侧的有一个正方形和一个大长方形的选项，会提示“toggledevicemodel”，切换成小屏幕后，是没有标尺选项的，我们可以点击右上角的三个黑点后，选中弹出的小菜单中的“showrulers”选项，就会出现标尺

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

二、谷歌浏览器像素和标尺测量的不同

我猜你的用的笔记本或者屏幕较小，系统推荐的屏幕缩放比例为125%，所以：css像素*1.25=设备像素在你的例子里150*1.25=187，和你的标尺是对上的，更好的验证策略是截图打开ps放大测量，你要是没有ps，你直接将div的width设为屏幕宽度，比如1920px，你就会发现出现滑动条了，还不是一般的长。将1920/1.25=1536px width设置为1536px，内外边距全清零，这才是严丝合缝刚刚好。

所以在系统设置里将缩放比例设置为100%就好了，但是并不推荐，明白原理就好

关于谷歌浏览器标尺的内容到此结束，希望对大家有所帮助。