如何修复matchMedia‘似乎不起作用’
matchMedia是一个用于媒体查询的JavaScript API，用于检测指定的CSS媒体查询是否匹配当前设备的特性。当matchMedia返回true时，表示媒体查询匹配成功，否则表示不匹配。
如果matchMedia在使用过程中出现了'似乎不起作用'的问题，可能有以下几个原因和解决方法：
- 浏览器兼容性问题：首先要确保所使用的浏览器支持matchMedia API。可以通过检查浏览器的兼容性列表或使用caniuse.com等网站来确认。如果浏览器不支持matchMedia，可以考虑使用polyfill或其他替代方案来实现相同的功能。
- 媒体查询语法错误：检查媒体查询的语法是否正确。媒体查询由媒体类型和零个或多个表达式组成，表达式之间使用逻辑运算符（如and、not、only等）连接。确保媒体查询的语法符合规范，否则可能导致matchMedia不起作用。
- 媒体查询条件不匹配：检查媒体查询的条件是否与当前设备的特性匹配。可以使用浏览器的开发者工具或其他调试工具来查看当前设备的特性，并与媒体查询条件进行对比。如果条件不匹配，可以尝试调整媒体查询的条件或使用其他适合的媒体查询。
- JavaScript代码错误：检查JavaScript代码中是否存在语法错误或逻辑错误。可以使用浏览器的开发者工具来查看控制台输出，以便找到可能的错误信息。确保代码逻辑正确，并且matchMedia的调用位置和参数正确。
- 其他可能的问题：如果以上方法都无法解决问题，可以尝试以下操作：
- 清除浏览器缓存并重新加载页面。
- 确保页面中引入了正确的CSS样式表。
- 检查页面中是否存在其他与matchMedia相关的JavaScript代码或库，可能存在冲突或重复调用的情况。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云媒体处理（视频处理）：https://cloud.tencent.com/product/mps
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
- 腾讯云云安全中心（SSC）：https://cloud.tencent.com/product/ssc
请注意，以上链接仅供参考，具体产品选择应根据实际需求和情况进行。
相关·内容
我正在尝试用react测试库来测试我的应用程序，但是我一直收到这样的错误：
TypeError:无法读取未定义的属性“addListener”
我使用自定义呈现，但错误似乎来自‘呈现’方法。
const customRender = (ui，options) =>呈现(ui，{包装器: TestingWrapper，...options }) ^
我甚至使用相同版本的反应和反应-多玛(这似乎是一个常见的问题rtl)。
“反应”："17.0.1"，“反应-多玛”："17.0.1"，
有问题的部分似乎是：
import React, {
浏览 6提问于2020-11-12得票数 14
回答已采纳
我已经用以下代码编写了在屏幕顶部显示消息(自动隐藏)的脚本：
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#dialog2').animate({
marginTop: "40",
}, 700);
},1000);
setTimeout(functio
浏览 0提问于2016-08-27得票数 0
当切换到移动设备时，我想将我的scrollX属性更改为true，但我不知道该如何做，我尝试过使用媒体查询，但它似乎不起作用。有什么想法吗？
var mobview = window.matchMedia( "(max-width: 425px)" );
$(document).ready(function() {
var table = $('#datatable').DataTable( {
"scrollX": false,
"bLengthChange": false,
浏览 1提问于2021-08-31得票数 0
回答已采纳
我正试图在我的react应用程序中使用useMediaQuery来进行响应性的js媒体查询。我使用的是打字本版本4.0.3。
守则如下：
import { useState, useEffect } from 'react'
const useMediaQuery = (query: string) => {
const [match, setMatch] = useState(false)
useEffect(() => {
const updateMatch = () => setMatch(window.matchMe
浏览 6提问于2020-11-06得票数 0
我试图根据用户的系统设置实现黑暗模式。为此，我使用@media查询prefers-color-scheme: dark。这是可行的，但我也需要在JavaScript中进行一些检查。
detectColorScheme() {
if (!window.matchMedia) {
return false;
} else if (window.matchMedia('(prefers-color-scheme: dark').matches) {
this.isDarkMode = true;
}
}
这段代码适用于Chrome，但对Safar
浏览 3提问于2020-01-12得票数 0
1回答
新的反应测试和有问题时，尝试渲染道具基于默认值。
如果我传入了值，测试就可以正常通过。
我不明白为什么。我能在这方面得到一些帮助吗。谢谢。
这是错误：
Invariant Violation: <Media targetWindow> does not support `matchMedia`.
在测试文件内部测试的一些默认值。
const listOfItems = [
[
{
"header": ""
}
]
];
const defaultProps = {
da
浏览 3提问于2021-02-03得票数 1
1回答
我有一个图标列表，位于DOM视窗中。到目前为止，我的脚本可以工作，但在调整大小时不起作用。我总是不得不直接按键盘上的F5键。
怎么啦？
$(document).ready(function() {
//
// functions
//
// ----------------------------------------------------------------------------
// select dom element and move to another
// ele
浏览 5提问于2016-01-26得票数 1
2回答
我有一个无序列表<ul>，如果它适合某个媒体查询，我也想添加一个事件侦听器。
原始css：
@media (max-width: 414px) {
transition: all 3s ease-out;
height: 0px;
display: none;
}
事件侦听器函数：
if(window.matchMedia("max-width: 414px")) {
console.log(list.style.height);
consol
浏览 6提问于2017-09-25得票数 0
回答已采纳
我正在尝试让Enquire.js在遗留浏览器上工作。我使用文档中的Deep support方法：
Modernizr.load([
{
test: window.matchMedia,
nope: "media.match.min.js"
},
"enquire-2.0.0.min.js",
"plugins.js", // jquery plugins
"main.js" // enquire-triggered functions + general c
浏览 5提问于2013-05-01得票数 4
我需要提供打印标签的能力，在成功保存和打印后重定向到搜索页面。这适用于chrome、firefox、即iOS 6/7 safari等。然而，当iOS ()从javascript发出时，window.print 8似乎不再停止执行window.print。
如果从 8 Safari导航到iOS (连接到计算机以便查看控制台日志)并单击“打印”按钮，则会看到console.log将在打印对话框打开时触发。因此，如果您想打印，然后导航，您将打印错误的屏幕，除非您有一个延迟，让您有足够的时间来点击打印，这在本例中是不可接受的。
我做了一个人为的延迟，因为在iOS 6/7中，这似乎使打印对话框最终停止了
浏览 4提问于2014-10-13得票数 8
回答已采纳
这是来自的可折叠的响应式导航栏，其中添加了一个搜索表单：
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collap
浏览 2提问于2014-03-19得票数 0
2回答
我在一些输入元素上使用数据报警器。
它是如何设置在元素上的：
AnyTime.picker(element_id)
element_id是包含元素id的字符串。
当该元素被单击时，它会打开任何时候的datepicker控件。
它可以工作，但我想防止它在某些情况下开火，如果某些条件得到满足。我似乎找不到一个像样的方法去做。
更具体地说，在从移动设备浏览时，我想要抑制它，并使用HTML5日期对话框(如果没有可用的话，只使用文本输入)。我找到了一种方法，在站点处于“移动布局”时，使用HTML5 (window.matchMedia())中的媒体查询来显示“HTML5 date”对话框，但是我最终会看
浏览 6提问于2014-01-12得票数 0
回答已采纳
我有一个父组件NavBar，它有两个子组件：NavItems和Icon。当这些子项中的任何一个被单击时，它们的外观都应该改变。一个非常标准的功能。
此外，我还希望能够根据屏幕宽度设置初始状态。为此，我创建了一个自定义钩子，我将其命名为useMatchMedia。每次调用useMatchMedia时，我都需要重写该状态，而不管它当前处于什么状态，以及要用这个新状态重新呈现哪些子组件。
我认为问题出在返回语句之前的NavBar中。但是以防万一，我也提供了我的自定义钩子的代码。
(滚动到我的代码下面，查看我修复问题的尝试)。
下面是父级：
function NavBar() {
const
浏览 1提问于2020-11-22得票数 2
1回答
有没有人发现过一种可靠的方法来确定Windows 7.5 (芒果)的设备像素比。
它是基于IE9的。在基于Webkit的浏览器中，我们有window.devicePixelRatio或使用window.matchMedia()进行适当的媒体查询。
在Windows中，我可以通过以下操作来确定像素比: screen.deviceXDPI / screen.logicalXDPI，尽管这似乎只有在页面被完全呈现后才是可靠的。在此之前，deviceXDPI的报告与logicalXDPI相同
有人找到解决办法了吗？
谢谢你的帮助/建议
浏览 4提问于2012-01-11得票数 3
已在配备笔记本电脑和视网膜MacBook的高清Windows8 IE上进行测试。没有人遇到过这个问题吗？似乎把max-width: 320px放在最后应该可以阻止它，因为很明显，这些屏幕的像素远远超过320px。
@media screen, handheld,
(min-moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(orientation: portrait),
(m
浏览 0提问于2013-07-09得票数 0
好的，所以我使用 --传统浏览器上的介质填充(ie8是最重要的)。
同时，我正在研究如何使用，它允许基于媒体查询匹配执行js代码。
在隔离测试下，这种材料起作用：
respond.js为IE8正确执行css中定义的媒体查询。
enquire.js基于匹配css的媒体查询正确执行javascript代码。(用于非旧式浏览器)
然而，这种组合似乎不起作用。即：
Enquire.js不执行基于媒体查询的javascript，该查询通过respond.js (用于旧版浏览器)启用。
由于Respond.js包含Paul爱尔兰语的 (如：)，对于遗留支持来说应该足够了，所以我不确定会有什
浏览 9提问于2012-11-08得票数 2
回答已采纳
在将react-slick滑块添加到我的webpack项目中后，我的chai测试开始失败，
C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:226
throw new Error('matchMedia not present, legacy browsers require a polyfill');
^
Error: matchMedia not present, legacy browsers require a polyfill
at Obje
浏览 1提问于2017-02-20得票数 0
其他人有没有经历过当和iframe (而不是整个页面)被打印时，onafterprint事件不会在chrome中触发？我们的客户报告说，它在一月份仍然有效。onafterprint似乎不能用于主文档，也不能用于iframe。我有<body onafterprint="some_function()">在页面上。
我试着在浏览器栈上运行我的测试，但它在Chrome88上似乎停止了工作。
doc.html：
<html>
<body style="background-color: #69D;" onafterprint=
浏览 66提问于2021-03-12得票数 0
我正在尝试使用来定义一些我想在子组件中使用的默认颜色。问题是，我也希望能够根据媒体查询来设置这些颜色。例如： const theme = {
"@media (prefers-color-scheme: no preference)": {
colorPrimary: "black",
},
"@media (prefers-color-scheme: dark)": {
colorPrimary: "white",
},
"@media (prefers-color-scheme:
浏览 25提问于2019-12-14得票数 2
问题是断点似乎是783px，而不是我在if语句中指定的768px。
因为我使用Bootstrap，所以我需要提供一些基于Bootstrap断点的代码。我也尝试过innerWidth，但它不起作用。媒体查询也不是一个选项，因为我需要使用JavaScript来更改DOM。它也必须是jQuery，因为这是我们在我工作的公司使用的。参见下面的示例代码：
if ($(window).width() > 768) {
$("#search").insertAfter(".search-webb");
$("#pages").insertAf
浏览 23提问于2019-03-26得票数 2
我认为Angular Flex-Layout库很棒，但是我不知道如何测试它的指令，比如fxHide或fxShow，如果你有这样的模板：
<div fxHide.lt-md class="my-div">Should not be visible for small devices (xs, sm)</div>
您应该如何模拟屏幕大小值来测试它？
浏览 18提问于2020-11-30得票数 0
4回答
我对JavaScript知之甚少，所以我甚至不确定我的问题是否有意义。然而，我的观点是，如何应用媒体查询的相同原则，根据屏幕的宽度更改脚本上的特定值。
在下面的例子中，我使用了一个-100px负滚动的scroll spy active菜单来进行标题补偿。这个偏移量是必要的，因为头部有一个固定的位置。
如果窗口小于900px宽度，我需要将偏移值更改为0px，因为在这一点上，标题位置变为相对位置。
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
浏览 1提问于2015-01-23得票数 2
我正在尝试调整一组简单的媒体查询，从css到javascript。css定义正常工作，但是javascript代码不起作用。
代码块如下所示：
window.matchMedia("(min-width: 401px) and (max-width: 600px)")
.addListener( function() {
console.log("CALLBACK (max-width: 600px)");
document.body.style.background = "red";
});
根据宽度，我更改文档颜色
浏览 3提问于2018-04-23得票数 2
回答已采纳
我使用react-responsive来显示react组件中的一些元素。我有一个为应用程序拍摄快照的集成测试，但快照显示了媒体查询组件应该在的空跨度。这就好像测试库不知道如何使用react-responsive媒体查询，因为如果我注释掉媒体查询并用一个简单的span替换，那么快照就会打印出来。
我已经在网上查阅了文档，但没有找到一个有效的解决方案。
已尝试将此内容添加到测试文件的顶部：
global.window.matchMedia = jest.fn().mockReturnValue({
matches: true,
addListener: () => {},
removeLis
浏览 2提问于2019-07-23得票数 6
我想要将css变量传递到我的媒体查询中，但我不知道如何传递。
这是一个Next.Js项目，我使用theme-ui的sx属性来分配样式。
const styles = {
headerLinkContainer: {
width: '500px',
justifyContent: 'space-evenly',
alignItems: 'center',
"@media screen and (min-width: var(--medium-devices))"
浏览 13提问于2021-12-02得票数 0
1回答
翻转效果条件
、、
所以我想弄清楚如何让点击效果在手机上发挥作用。我想要台式机/笔记本电脑上的悬停效果和移动设备上的点击效果。
目前已实现悬停效果。正如你在我的网站主页上看到的：
我需要弄清楚的是如何在一定的屏幕尺寸(例如800px)下实现点击效果。因此，点击效果将要求用户点击".flipper“才能翻转卡片，而不是在光标悬停在".flipper”上时立即翻转卡片。这将需要我放在一个条件语句中-然而，它不起作用。我对JQuery不是很熟悉，所以这是一个相当大的挑战。这是我目前所拥有的：
if (window.matchMedia('(max-width: 800px)').matc
浏览 2提问于2016-12-20得票数 0
1回答
在<MyComponent>组件中，我使用 <MediaQuery>组件来区分呈现移动内容和桌面内容。
export class MyComponent extends React.Component {
//...
render() {
<MediaQuery query="(max-width: 600)">
<div className="inside-mobile">mobile view</div>
</MediaQuery>
浏览 0提问于2018-07-09得票数 2
1回答
我得到了一个基于示例的响应式jcarousel。
下面是我的代码：
$(function() {
var jcarousel = $('.jcarousel');
//var navpanenext = '+=1';
//var navpaneprev = '-=1';
jcarousel
.on('jcarousel:reload jcarousel:create', function () {
var carousel = $(this),
浏览 1提问于2015-05-11得票数 0
有人能帮我解释一下为什么下面的代码不起作用吗？我似乎不明白为什么..。对我来说，一切都应该正常。
jQuery(window).load(function($){
if (window.matchMedia("(min-width: 768px)").matches) {
var sideHeight = $('.mainContent').css('height');
$('.sidebar').css('height', sideHeight);
}
});
下
浏览 1提问于2015-10-05得票数 1
回答已采纳
1回答
我正在使用TweenMax基于滚动位置进行动画。我想要设置动画的位置会根据屏幕尺寸的不同而变化。可以根据屏幕的宽度进行变量更改吗？ 我是个新手，使用了很多复制/粘贴解决方案。我有两个相邻的矩形div，它们像卡片一样翻转，在背面显示信息。在移动屏幕上查看时，这些卡片是垂直堆叠的，而不是彼此并排。这会改变我想要动画翻转卡片的点。 我找到的解决方案是根据媒体查询更改var sceneStart。这只是一个解决问题的想法。 这是我曾经尝试过的，但没有成功。 var sceneStart2;
if (window.matchMedia("(max-width: 480px)")) {
浏览 33提问于2019-01-05得票数 0
回答已采纳
当我在移动的时候，我如何把我的标志变成白色？但是我已经有了下面的滚动代码，我使用的是香草javascript。我有一个又暗又轻的标志。它在滚动时工作，但不知道如何为宽度移动添加脚本
addEventListener('scroll', (event) => { });
onscroll = (event) => {
const logoDark = document.querySelector('.nav-logo');
const logoLight = document.querySelector('.nav-logo-l
浏览 3提问于2022-08-13得票数 -3
基于此文档：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 您应该能够使用CSS以编程方式对不同的可用指针类型做出不同的反应。然而，我觉得过去有一种简单的方法来测试你的当前设备使用的是什么指针，但在Stackoverflow上到处寻找，我再也找不到它了。我如何才能做到这一点并找到我的设备的当前指针值？
浏览 22提问于2021-09-09得票数 0
在我的代码项目网站的第二页上，我有一个jquery事件，当视图大于720 in时，可以向右打开一个简短的幻灯片。
当宽度小于720 is时，我试图使“单击幻灯片右边”的东西消失。然而，在页面的初始加载中，空白显示和单击该区域似乎不起作用。此外，当我使浏览器尽可能小，“点击幻灯片”消失了与空白，但没有回来时，我调整大小到全屏。我在这里做错什么了？
注意，我现在知道如何使用媒体查询来解决这个问题，但我想看看是否可以在jQuery脚本中实现它，而不必在css中更改它。
建议？
jquery：
$(window).resize(function() {
var width = $(win
浏览 4提问于2016-02-23得票数 1
回答已采纳
4回答
嗨，我试图找到一种方法来停止引导，旋转木马，自动幻灯片功能，以停止仅在移动。我试图使用javascript实现这一点，但我使用的代码似乎不起作用。
var ismobile = window.matchMedia("only screen and (max-width: 760px)");
if (ismobile.matches) {
$('.carousel').carousel ({
interval:false
});
}
浏览 2提问于2014-10-15得票数 1
回答已采纳
1回答
我读到了关于交互媒体的这篇文章，它解释了css如何检测指针是否是触摸屏。它使用@media查询，如
@media (pointer: coarse){
body{
// do something
}
}
但是我想知道如何使用javascript或者JQuery来实现它，这是可能的吗？
谢谢，对我的英语表示抱歉。
浏览 11提问于2017-02-08得票数 9
回答已采纳
1回答
我希望有人能帮助我解决一个引导带3问题，我正在经历。
一张截图比我用英语解释的要好得多。所以，请看下面。
如您所见，我在左边有两个列，右边有一个列，还有一个引导带旋转木马。但问题是，我在左列下得到了空(白)空间。
我希望右边的列+旋转木马的高度与左边的列相匹配。所以一切都是一致的。左边的列有正确的高度(在我的实际设计中已经有文本内容)。我认为这是可能的，但我不知道如何做到这一点。
我自己也尝试过一些奇怪的东西，虽然它适用于一个浏览器，但显然对另一个浏览器不起作用。因此，我正在寻找解决这个问题的办法。我认为改变旋转木马是可能的吗？
因为这只是我正在工作的整个网站的一个(小)部分，我将粘
浏览 2提问于2015-06-24得票数 0
回答已采纳
我正在使用React测试库getByText来找到一个隐藏在一个名为Hidden的重要ui组件中的按钮。因为RTL找不到它，所以Material在这里有一个实现。但我不知道如何实现它来简单地找到一个按钮。一旦删除隐藏按钮，我就不知道如何在测试中使用它们的createMatchMedia()查询。
隐藏组件在959 at和down时隐藏了我的按钮。
import React from "react"
import { render } from '../../../../test/test-utils'
import Collections from ".
浏览 10提问于2020-11-26得票数 1
回答已采纳
我在一个文件上有下面的svg代码，它有一个<style>元素，因为我正在尝试创建这个svg的暗模式版本：
<svg width="10" height="71" viewBox="0 0 10 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.gradient {
stop-color: white;
}
@media (prefers-color-scheme:
浏览 0提问于2020-05-18得票数 0
我试图修复这个Eslint错误：
Expected an assignment or function call an instead saw an expression
对于如何容纳这些代码，这样它就不会在下面的示例代码中出现错误，有什么想法吗？
window.matchMedia || (window.matchMedia = function() {
if (!styleMedia) {
const style = document.createElement('style');
const script = document.getElemen
浏览 4提问于2021-12-23得票数 0
新材料UI 有一个renderInput支柱，它获得一个呈现文本字段的函数。除了这个函数被呈现两次，并且在第一次呈现时它只接收到它所需要的一些道具之外，它工作得很好。
使用React测试库呈现时，只有第一次呈现。值得注意的是，endAdornment不存在。因此，不可能通过getByRole('button')并单击按钮来打开选择器模式。
我尝试过waitFor()和rerender()的各种排列，但似乎无法让按钮出现。
，它显示正在注销的renderInput参数的两个版本。(我也有一个测试，以查找按钮，但不幸的是，我也做了一些错误的测试，它没有运行。)
有什么建议吗？
浏览 9提问于2021-12-09得票数 1
如何使用react测试库的TextField在MUI数据报警器中输入user-event？我看得出来有个面具在应用
我试过userEvent.type(inputEl, '1')和userEvent.keyboard('1')。在这两种情况下，输入仍然是空的。
我目前的假设是，重发器将我的更新替换为高阶组件的空状态(基于应用程序--输入的日期格式掩码)，这是有意义的。
按预期工作，所以我的问题是特定于的。
在这个中可以找到该组件(和测试)的经过稀释的版本。
下面是呈现的HTML的副本，以证明我使用的是一个data-testid的输入元素，这是不起作用的：
scr
浏览 16提问于2022-02-16得票数 5
回答已采纳
类似于"“，仅适用于JavaScript。
如何在Safari/Chrome/Firefox中检测用户的系统是否处于新的macOS黑暗模式，并以布尔值的形式获得结果？
浏览 0提问于2019-04-15得票数 2
回答已采纳
我将reactjs与nextjs结合使用，我有以下问题。当页面被加载时，我必须设置一个变量，它应该告诉我用户是否在使用暗模式。
我做了以下工作，但我不确定这是否正确。
我必须设置一个值，因为如果我使用useState内部的窗口而不使用useEffect，那么nextjs就会出现问题。
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
setDarkMode(window.matchMedia && window.matchMedia('(prefers-color
浏览 7提问于2022-04-07得票数 0
例如，新的堆栈溢出功能，黑暗模式有一个选项，使用系统默认之间的光模式和暗模式。他们如何知道JavaScript的系统默认值是什么？如果没有JavaScript，你是如何找到它的？
浏览 0提问于2020-03-30得票数 0
回答已采纳
我正在运行一段代码，其中包含javascript中的以下代码：
var mql = window.matchMedia("screen and (max-width: 440px)")
它在所有浏览器中都运行得很好，但在IE11中，它给出的错误为
Object doesn't support property or method 'matchMedia'
我该如何解决这个问题？
浏览 2提问于2015-10-05得票数 0
这是我的第一次前端测试经验。在这个项目中，我使用Jest快照测试，并在组件中获得了一个错误TypeError: window.matchMedia is not a function。
我浏览了Jest文档，我找到了“手动模拟”部分，但我还不知道如何做到这一点。
浏览 19提问于2016-10-03得票数 161
回答已采纳
我试图实现一种黑暗模式，只适用于低于700 to的屏幕。我的身体背景设置为所有屏幕，然后有JS设置间隔功能，将身体背景颜色更改为白色后，有时。@media只有屏幕和(最大宽度:700 max)有自己的背景黑集。但是由于设置了区间函数，它在某个时候会变回白色。因此，请帮助我如何访问CSS @media only屏幕和(最大宽度:700 So )下的body后台属性，在设置的间隔函数中的某个时候更改背景色。我正在寻找一个JavaScript解决方案，因为我已经使用了JS。在JS函数中有使用CSS变量的方法吗？
CSS
body {
background: rgba(225,1
浏览 9提问于2022-02-16得票数 0
回答已采纳
1回答
我试图用react在HTML中实现一个视频。因此，如果视口宽度小于750 on，我想将视频源更改为更小的分辨率/更小的文件(因为数据传输很高等等)。
因此，在一个完美的HTML世界中，您可以构建以下内容：
<video controls>
<source src="video-small.mp4" type="video/mp4" media="all and (max-width: 750px)">
<source src="video.mp4" type="video/mp
浏览 0提问于2019-01-18得票数 0
回答已采纳
如何检测我的网站的用户是否在使用macOS / JavaScript或CSS启用黑暗模式？这个是可能的吗？
浏览 4提问于2018-06-06得票数 30
回答已采纳
10回答
我在一个项目中使用Twitter Bootstrap。除了默认的引导样式之外，我还添加了一些自己的样式
//My styles
@media (max-width: 767px)
{
//CSS here
}
当视口的宽度小于767px时，我还使用jQuery来更改页面上某些元素的顺序。
$(document).load($(window).bind("resize", checkPosition));
function checkPosition()
{
if($(window).width() < 767)
{
$("
浏览 128提问于2013-10-10得票数 199
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
