首页 > 电脑专区 > 电脑教程 >

谷歌浏览器如何调试响应式网站

来源:互联网 2023-02-21 22:46:46 124

现在响应式网站越来越普及,面对大环境,如何调试页面的展现形式也成为了一大难题,或许会说可以拉缩浏览器,但是毕竟和实际情况还是有很大出入的,所以接下来就告诉你如何更接近环境的测试网站布局!RJg办公区 - 实用经验教程分享!

工具/原料

  • 谷歌浏览器
  • 网页、本地或者网站

方法/步骤

  • 1

    打开谷歌浏览器,打开你的网站或者本地静态页,先以百度经验分享为例!RJg办公区 - 实用经验教程分享!

    谷歌浏览器如何调试响应式网站RJg办公区 - 实用经验教程分享!

  • 2

    按快捷键“F12”或者右击页面“选择查看元素”;会弹出如下代码框,这个是代码调试器,可以对页面的代码进行重定义,这边就不讲了,如果不懂的话,可以查看我的其他一篇经验,那有详细介绍!RJg办公区 - 实用经验教程分享!

    谷歌浏览器如何调试响应式网站RJg办公区 - 实用经验教程分享!

  • 3

    点击代码框左上侧的手机图标,点击以后,页面就会进入移动端测试环境!如图所示!RJg办公区 - 实用经验教程分享!

    谷歌浏览器如何调试响应式网站RJg办公区 - 实用经验教程分享!

    谷歌浏览器如何调试响应式网站RJg办公区 - 实用经验教程分享!

  • 4

    点击上面的下拉框,选择你要测试的环境,包括平板、手机等,如图所示!我选择了苹果4s进行测试,显示的就如图所示!RJg办公区 - 实用经验教程分享!

    谷歌浏览器如何调试响应式网站RJg办公区 - 实用经验教程分享!

    谷歌浏览器如何调试响应式网站RJg办公区 - 实用经验教程分享!

  • 4该信息未经许可获取自百度经验
  • 5

    测试完成以后,最后再次点击代码测试框的手机图标,使其恢复到电脑测试环境,看看是不是又恢复电脑版面啦!RJg办公区 - 实用经验教程分享!

    谷歌浏览器如何调试响应式网站RJg办公区 - 实用经验教程分享!

  • 6

    在你测试完成以后,记得再点击手机图标,使其恢复电脑测试模式,不然后期在测试其让网站,就会显示手机模式哦!RJg办公区 - 实用经验教程分享!

  • 注意事项

    • 弹跳调试框以后,记得点击右上角手机图标,不然不会出来的!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!RJg办公区 - 实用经验教程分享!


    标签: 浏览器浏览响应

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码