我最近开始使用响应属性编写我的布局。我个人讨厌移动网站,但为了适应我的访问者,我决定让我的网站具有响应性。
我想不通的是如何在我想要的时候禁用响应属性。
我想在我的页面顶部有一个链接,单击该链接将打开/关闭移动网站。
这可以做到吗?
谢谢!
我最近开始使用响应属性编写我的布局。我个人讨厌移动网站,但为了适应我的访问者,我决定让我的网站具有响应性。
我想不通的是如何在我想要的时候禁用响应属性。
我想在我的页面顶部有一个链接,单击该链接将打开/关闭移动网站。
这可以做到吗?
谢谢!
首先想到的是一个 JavaScript (/jQuery) 函数,当切换为单向或另一向时,该函数可从 HTML 布局中添加或删除 CSS 文件。您必须制作一个单独的 CSS 文件,其中仅包含您的响应式媒体查询,但这应该不是什么大问题。
如果您使用服务器端语言,一种方法是提供包含查询信息的链接,例如http://mywebsite.com/?full=1
供想要查看完整站点的查看者使用。您将检查该变量是否full
存在于查询数据中并检查其1
. 如果是,那么您将相关的full
会话变量设置为 true。然后每当加载页面时,检查会话变量full
是否为真。如果是,则提供“完整 CSS”文件。如果不是,请提供“响应式 CSS”文件。我相信你可以使用 cookie 而不是会话变量。我在服务器端部门有点生疏。
您也可以使用 cookie 在 JavaScript 中执行此操作。
我认为最简单的方法是将样式表的响应部分放在一个单独的文件中,例如responsive.css
. 然后,您可以将 javascript 函数绑定到切换该样式表的链接:
在<head>
:
<link rel="stylesheet" href="responsive.css" id="responsiveStyle">
在<body>
:
<a href="javascript:toggleResponsive()">Toggle</a>
Javascript:
function toggleResponsive() {
var responsiveStyle = document.getElementById('responsiveStyle');
if(responsiveStyle.rel === "stylesheet") {
responsiveStyle.rel = "";
} else {
responsiveStyle.rel = "stylesheet";
}
}