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

发布时间：2020-12-14 18:37:33 所属栏目：资源来源：网络整理

导读：使用响应式设计时,有没有办法让用户仍然可以查看完整的网站？例如.他们正在iPhone上观看,但希望看到完整的网站.他们点击“完整站点”链接,它会显示1024px版本. 解决方法如果您正在使用媒体查询,则仅在具有“响应”类的正文元素下应用规则. @media screen a

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

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

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!