响应式设计:允许用户也查看完整站点

Question

使用响应式设计时,有没有办法让用户仍然可以查看完整的网站？

例如,他们正在iPhone上观看,但希望看到完整的网站.他们点击"完整站点"链接,它会显示1024px版本.

Answer 1

如果您正在使用媒体查询,则仅在具有"响应"类的正文元素下应用规则.

@media screen and (max-width: 320px) {
  body.responsive {
    color: blue;
  }
}

如果用户不想查看响应式布局,只需从body元素中删除"responsive"类,从而使所有规则无效.您可以通过cookie或其他方法保留用户首选项.

演示:http://jsbin.com/obaquq/edit#javascript,html

将窗口缩小到不超过500px会将文本变为白色,背景变为蓝色.这取决于具有"响应"类的身体.单击第一段将切换此类,从而切换媒体查询本身的效果.