标签: media-queries

我正在尝试使用媒体查询根据窗口的宽度更改块中元素的宽度(这允许我增加页面上的列数而不更改列的宽度).我希望能够使用em而不是像素来做到这一点,这样如果你改变字体大小,一切都会正确.但是,如果我使用以下内容:

html {
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/
}

@media screen and (min-width: 42em) {
    div#page {
        width: 42em;
    }
}

当窗口的最小宽度达到我的浏览器(Safari)的默认字体大小42*16px时,将触发媒体查询,而div#page的宽度将为42*12px,从html元素继承字体大小.我真的很想根据我正在使用的文本的宽度触发媒体查询,有没有办法让它工作？

我有以下我想修改的HTML:

<div class="col1 width8"><img src="images/entity.jpg"></div>

我想使用媒体查询,但我不想修改css,而是将类名从width8替换为width6.以下标准媒体查询通常无法实现此目的:

@media only screen and (min-width: 1240px) and (max-width: 1484px) { }

我希望使用jquery删除类,并在窗口介于1240和1484px之间时添加一个类.你可以帮助我使用jquery替代媒体查询来修改内联类和id名称吗？

这是我的jquery

 $(document).ready(function() { 
    $(window).resize(function(){
            var width = $(window).width();

            if(width >= 1240 && width <= 1484){
                $('#info').removeClass('col9').addClass('col8');
            }
            else if(width >= 1485 && width <= 1788){
                $('#info').removeClass('col8').addClass('col7');
            }

            else if(width >= 1789 && width <= 2237){
                $('#info').removeClass('col7').addClass('col6');
            }

            else if(width >= 2238 && width <= 3000){
                $('#info').removeClass('col7').addClass('col6');
            }
            else{
                $('#info').removeClass('col8').addClass('col9');
             }
            })

.resize();

    });

目前正在开发一个响应式设计网站.我使用媒体查询根据宽度和屏幕分辨率定位不同的设备.

1. 我有一个场景是我想使用屏幕分辨率来定位设备,但我不明白这是如何工作的.

2. 我想检查最小宽度和最大宽度,屏幕分辨率也可以从97dpi到ipad最大分辨率264dpi.但这似乎不起作用.如果我为hp加载的平板电脑提供单一分辨率最小宽度:155dpi它可以工作.但最小到最大分辨率条件似乎不起作用.你们能分享一下你的想法吗？

为此,我使用了类似下面的代码

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

在页面运行时是否可以使用jQuery或其他任何方式更改宽度值@media query css？

所以,例如,如果在style.css我有

@media screen and (min-width: 400px) {
   /*whatever*/
}

500px在网站加载后将其更改为

大多数时候,我使用带有预设断点的LESS变量进行媒体查询,如下所示:

@s-max : ~"screen and (max-width: 40em)";
@m-max : ~"screen and (max-width: 50em)";
@l-max : ~"screen and (max-width: 60em)";

USAGE

.some-class {
    color: red;

    @media @s-max {
       color: blue;
    }
}

但有时,我希望能够在我的.less样式表中引用任意断点,而无需在单独的mixin文件中设置新的预设值.

你可以在SASS中做到这一点.mixin看起来像这样:

@mixin bp-min($canvas) {

    @media only screen and (min-width:$canvas) {@content;}
}

USAGE

@include bp-min(750px) {

//responsive styling for min-width of 750px

}

在LESS中,我想象等效的mixin看起来像这样:

.bp-min(@min) {

    @media only screen and (min-width:@min)...
}

唯一的问题是,LESS中缺少{@content}参数,它抓住了开发人员输入的其余样式.我喜欢SASS,但我不能在工作中使用它.

有谁知道这个问题的基于LESS的解决方案？

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

 @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;
}

我正在努力让2个背景图像彼此同步缩小,所以我的座位计划将适用于手机/平板电脑.

我已经尝试了背景封面,包含,100%并将其他div值设置为100%,但是保持这些座位就位没有乐趣.

因此,不仅650px以下的座位图需要缩小背景图像,而且座位图像也需要缩小 - 他们需要保持在座位平面上的位置.包含的div当前设置为15px以显示座位图像.

这是我正在使用的原始静态宽度代码 https://jsfiddle.net/kjyopdL8/

座位尺寸应为15px,直到座位图低于650px,然后座位图像与主要座位图图像同步缩小,同时保持相同的位置和比例

#theatre {
  width: 650px;
  float: left;
  padding-right: 5px;
  margin: 25px 15px 0 10px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

#bmessage {
  padding: 1px 3px;
  height: 20px;
  font-size: 14px;
  background: #ddf;
  color: #080;
  font-weight: bold;
}
#seats:before {
  content: url('http://i.imgur.com/qn56yss.gif');
}

#seats {
  margin: 10px 0;
  padding: 10px 0;
  position: relative;
}

#seats div {
  position: absolute;
  width:15px;
  height:15px;
}

#seats .s1.std.grey {
  background: url('https://s3.postimg.org/g9dq32nqr/1_1_2.png') no-repeat center top;
}

<div …

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

整个 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>