六透社论坛

六透社论坛
您的位置:主页 > 六透社论坛 >

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


发布日期:2019-07-03 22:06   来源:未知   阅读:

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

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

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

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

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

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