WordPress:在按钮点击时使用额外的CSS块

Question

我目前正在开发一个Wordpress网站，我需要一个移动版本的按钮来手动在移动版和桌面版之间来回切换。

我有一个.css文件

    @media (pointer:coarse) {}

添加移动版本修改(指针：粗略检测设备是否有光标(。

现在我想手动激活修改，如下所示：

    $('#Button').click(function(){
    ...
    });

问题是我不知道如何定位.css文件的大块。

随时欢迎替代解决方案！如果我不清楚什么，请随时询问。

编辑：感谢Jignesh Sanghani给我这个想法！我在要在移动模式下激活的每个元素之前放置了一个类(.mobile(，并在单独的.js文件中使用以下代码，但首先这里是HTML代码：

    <button id="mobileversion">Mobile-Version</button>
    <button id="desktopversion">Desktop-Version</button>

.js码：

jQuery(document).ready(function($){
$("body").removeClass("mobile");

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  $("body").addClass("mobile");
var link = document.getElementById('desktopversion');
  link.style.display = 'block';
}
$('#mobileversion').click(function(){
$("body").addClass("mobile");
var link = document.getElementById('mobileversion');
  link.style.display = 'none';
var link = document.getElementById('desktopversion');
  link.style.display = 'block';
});
$('#desktopversion').click(function(){
$("body").removeClass("mobile");
var link = document.getElementById('desktopversion');
  link.style.display = 'none';
var link = document.getElementById('mobileversion');
  link.style.display = 'block';
});
    });

现在我有 2 个按钮可以在之间切换，我可以隐藏一个带有.css代码的按钮，因此每个网站版本只显示一个。

Answer 1

据我所知，最好的选择是有两组媒体查询，这些查询仅基于存在的父类应用。

$('#Button').click(function(){
		$("body").addClass("w600").removeClass("w768");
		});

@media (max-width: 600px) {
	.w600 .myDiv {
		color: red;
	}
	.w600 .myOtherDiv {
		color: blue;
	}
}
@media (max-width: 768) {
	.w768 .myDiv {
		color: red;
	}
	.w768 .myOtherDiv {
		color: blue;
	}
}