网站响应式页面查看工具源代码

最新推荐文章于 2022-04-26 00:44:39 发布

GLyihu

最新推荐文章于 2022-04-26 00:44:39 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签：响应式

本文链接：https://blog.csdn.net/GLyihu/article/details/78021076

版权

这是一个用于查看网站响应式设计的源代码，包括电脑、平板和手机不同设备的预览模式。用户可以通过点击相应的设备图标切换显示，便于在不同分辨率下测试网页布局。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>网站响应式页面查看工具源代码</title>
<script type="text/javascript" src="http://sc.chinaz.com/style/js/jquery-1.2.pack.js"></script>

<script type="text/javascript">
var theme_list_open = false;

$(document).ready(function() {

    function fixHeight() {

        var headerHeight = $("#switcher").height();

        $("#iframe").attr("height", $(window).height() - 84 + "px");

    }

    $(window).resize(function() {

        fixHeight();

    }).resize();

    //响应式预览
    $('.icon-monitor').addClass('active');

    $(".icon-mobile-3").click(function() {

        $("#by").css("overflow-y", "auto");

        $('#iframe-wrap').removeClass().addClass('mobile-width-3');

        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

        $(this).addClass('active');

        return false;

    });

    $(".icon-mobile-2").click(function() {

        $("#by").css("overflow-y", "auto");

        $('#iframe-wrap').removeClass().addClass('mobile-width-2');

        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

        $(this).addClass('active');

        return false;

    });

    $(".icon-mobile-1").cli