使用响应式设计时,有没有办法让用户仍然可以查看完整的网站?
例如.他们正在iPhone上观看,但希望看到完整的网站.他们点击“完整站点”链接,它会显示1024px版本.
@H_301_4@解决方法
如果您正在使用媒体查询,则仅在具有“响应”类的正文元素下应用规则.
@media screen and (max-width: 320px) { body.responsive { color: blue; } }
如果用户不想查看响应式布局,只需从body元素中删除“responsive”类,从而使所有规则无效.您可以通过cookie或其他方法保留用户首选项.
演示:http://jsbin.com/obaquq/edit#javascript,html
将窗口缩小到不超过500px会将文本变为白色,背景变为蓝色.这取决于身体具有“响应”类.单击第一段将切换此类,从而切换媒体查询本身的效果.
@H_301_4@ @H_301_4@