使用JavaScript,输出包含应用于当前页面的所有媒体查询的列表的最佳方法是什么.

我假设这需要过滤以找到嵌入式媒体查询,即

<link rel="stylesheet" media="only screen and (min-width: 30em)" href="/css/30em.css">

以及位于CSS文件中的媒体查询,即

@media only screen and (min-width: 320px) {}

我正在寻找的一个示例输出:

<p>There are 3 media queries loaded on this page</p>
<ol>
    <li>30em</li>
    <li>40em</li>
    <li>960px</li>
</ol>

我试图找出如何根据当前的设备/媒体查询选择运行一个javascript块.我正在使用Twitter Bootstrap,基本上有两个版本的媒体查询:

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

我有一个我生成的地图,但我没有在移动/小屏幕版本中显示它和宽带原因.然而,即使您无法在移动屏幕上看到它,javascript仍会在后台执行.所以,我试图在javascript中找到一种方法,我可以做以下事情:

// Imaginary function
var screenType = getScreenType();

if(screenType == 1) {
   // Load map
}

我已经读过人们在他们的媒体查询中将CSS属性设置为特定值,然后尝试根据CSS属性在DOM中找到该元素,但必须有更好的方法.有任何想法吗？

在CSS中使用rem作为单位时,缩放在Safari(PC和Mac)中都不起作用.

示例位于http://jsfiddle.net/L25Pz/3/

标记:

<div>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS:

html { font-size:62.5% }

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; }
img { width:27.5rem; height:9.5rem; }
p { font-size:5rem; }

@media only screen and (max-width: 500px) {
    html { font-size:50%;} /* should render everything * 0.8 */
}

...当浏览器窗口宽度超过600px时,在所有浏览器中呈现大小为275px*95px的图像.此外,在触发媒体查询时,图像和背景将其宽度和高度调整为220px*76px.

但是 - 使用Safari,宽度和高度设置为247px*75px.哪个不是*0.8,这是别的......

另一方面,段落的字体大小正确呈现:挂钩在查询上时为40px.

如果你问我,我会觉得很奇怪.有人有解决方案吗？

我有下一个CSS代码:

#mgheader .letters {
  display: inline-block;
  margin-left: 55px;
  margin-top: -45px;
  position: absolute;
}

#mgheader .letters {
  display: inline-block;
  margin-left: 10px;
  position: absolute;
}

现在我想在Google Chrome和Safari中执行第一个,在其他浏览器中执行第二个.

我试过这个,但第二个代码似乎总是在执行:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mgheader .letters {
    display: inline-block;
    margin-left: 55px;
    margin-top: -45px;
    position: absolute;
  }
}   

#mgheader .letters {
  display: inline-block;
  margin-left: 10px;
  position: absolute;
}

我该如何解决这个问题？

我继承了这个,并想知道没有"媒体类型"的媒体查询是做什么的？

 @media (min-width: 768px) {
   .commentlist-item .commentlist-item {
    padding: 0 0 0 2em;
   }
}

标准语法符合www.w3schools.com/css/css3_mediaqueries.asp

  @media not|only mediatype and (expressions) {
    CSS-Code;
}

如何在Reactjs中执行以下CSS媒体查询？

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

我尝试了以下操作，但是它引发了语法错误并且无法编译。

heading: {
  textAlign: 'right',
  @media (maxWidth: '767px') {
    textAlign: 'center';
  }
  @media (maxWidth: '400px') {
    textAlign: 'left';
  }
}

我无法让媒体查询与媒体模板和样式组件一起使用。我直接从文档中定义了一个 MediaQueries 模板：

媒体查询.js

import { css } from "styled-components";

const sizes = {
  desktop: 992,
  tablet: 768,
  phone: 576
};

// Iterate through the sizes and create a media template
const media = Object.keys(sizes).reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media (max-width: ${sizes[label] / 16}em) {
      ${css(...args)}
    }
  `;

  return acc;
}, {});

export default media;

这是测试文件：

应用程序.js

import React from "react";
import styled from "styled-components";
import media from "./MediaQueries";

const Desktop = styled.h1`
  color: red;

  ${media.phone` …

这让我很头疼。也许我只是错过了一些愚蠢的事情，希望你们能提供帮助。

整个 html 元素的宽度约为移动设备屏幕的 80%。

在笔记本电脑上，减小屏幕尺寸并不能重现该问题。html 将按预期为全尺寸。

这是该应用程序的链接，您可以自己查看：https ://kaayo.vercel.app/

我尝试使用 android devtools 进行调试，结果如下：

最后，这是我的 chakraTheme.js：

global: {
      "html, body": {
        color: "gray.600",
        margin: "0",
        padding: "0",
        lineHeight: "tall",
        fontWeight: "400",
        backgroundColor: "bg.100",
      },
      body: { minHeight: "100vh" },
      "input:focus": {
        borderColor: "primary.200!important",
      },
      "a:hover": {
        textDecoration: "none",
      },
      ':focus:not(:focus-visible):not([role="dialog"]):not([role="menu"])': {
        boxShadow: "none !important",
      },
    },

如果您还需要什么，请告诉我。

感谢您的帮助！

我有：

body { background: white; }\n

为了显示暗模式，我使用.dark类：

.dark body { background: black; }\n

为了检测用户是否将其操作系统设置为使用深色主题，我们有prefers-color-scheme：

@media (prefers-color-scheme: dark) {\n  body { background: black; }\n}\n

然后我们就有了 DRY（Don\xe2\x80\x99t Repeat Yourself）编程的想法。我们是否可以在不重复CSS属性声明的情况下定义深色模式，并在此过程中允许用户通过JS在颜色模式之间进行切换？

对于上面的示例，.dark类和媒体查询是彼此的副本。

到目前为止我做了什么

在 CSS 中跳过prefers-color-scheme并使用：

body { background: white; }\n.dark body { background: black; }\n

然后通过JS，检测他们的设置并调整

if (window.matchMedia && window.matchMedia(\'(prefers-color-scheme: dark)\').matches) {\n     document.getElementsByTagName(\'html\')[0].classList.add(\'dark\');\n}\n

这种方法的问题是它没有prefers-color-scheme在 CSS 中使用。

虽然我可以补充： …

使用@mui/material/useMediaQuery于Next.js会导致样式在首次渲染时闪烁。

我知道这是由于useMediaQuery服务器端和客户端之间的值发生变化造成的。有没有什么办法解决这一问题？

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
...
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('md'));
...
<Typography variant={matches ? 'subtitle1' : 'h5'}>
  {text}
</Typography>

虽然可以通过如下所示指定显示来切换来轻松解决此问题，但display 应尽可能避免这种冗长的书写风格。

<Typography sx={{ display: {xs: 'block', md: 'none'} }} variant={'subtitle1'}>
  {text}
</Typography>

<Typography sx={{ display: {xs: 'none', md: 'block'} }} variant={'h5'}>
  {text}
</Typography>