为用户提供查看响应式布局的桌面版本的选项

Question

在使用响应式布局时,为用户提供在移动设备上查看网站桌面版本的选项的最简单方法是什么？

Answer 1

给一些类,比如响应你的主HTML,比如:

<body class="responsive">
...
</body>

并.responsive为正常屏幕编写没有父前缀的CSS :

.myheading {
...
}
.mybutton {
...
}

.responsive在媒体查询中使用父前缀表示较小的屏幕

@media all and (max-width: 320px) { /* example */
    .responsive .myheading {
    ...
    }
    .responsive .mybutton {
    ...
    }
}

当有人想要查看大屏幕版本时,只需执行以下操作:

$('body').removeClass('responsive');

并且您的媒体查询将从那里被忽略.当你想切换回响应时,只需:

$('body').addClass('responsive');

注意:上面的解决方案假设jquery,即使没有jquery也可以轻松完成.