styleSheets

红宝书16.2.2，新发现个属性：document.styleSheets。

        见名知意，是对样式表的操作，可以获取到当前页面所有的样式，也可以控制整体样式是否生效。如：link引入的样式、style标签内的样式、html标签内style属性的样式。

可以做和类似@meta一样的操作：

<style type="text/css">
	/*0*/
	#test {
		background: red;
		color: black;
	}
</style>
<style type="text/css">
	/*1*/
	#test {
		background: black;
		color: white;
	}
</style>

<div id="test">test</div>

window.addEventListener('resize', () => {
	const styleSheets = document.styleSheets;// 获取引入样式的数组
	const testEle = document.getElementById('test');
	if(window.innerWidth > 375) {
		styleSheets[1].disabled = true;// 禁用下标为1的，0生效
		testEle.innerText = '大于375';
	}else {
		styleSheets[0].disabled = true;// 禁用下标为0的，1生效
		styleSheets[1].disabled = false;
		testEle.innerText = '小于等于375';
	}
});

375的屏：

大于375的屏：

结尾：如果有大量样式，把style标签换成link即可。