标签: media-queries

最近我一直在玩CSS Media Queries,因为这是让我的网站适应各种屏幕尺寸的好方法.我打算将它们实现到实时版本中.

我的问题是:布局更改时是否有任何建议的分辨率值？

我有一个页面在<style>标签中使用非外部CSS ,在这些<style>标签中是以下媒体查询:

@media screen and (max-width:768px){
/* CSS */
}

所有这些都在Firefox中运行良好,CSS为768px宽度,仅在应该的时候呈现.但是,在IE9中,无论大小如何,此媒体查询中的CSS都会在加载时呈现.

然而,在加载之后,如果我根本改变浏览器大小,它会像桌面版一样重新呈现.所以基本上,IE9非外部样式表似乎是渲染所有CSS,无论是在媒体查询中它是否匹配,但是如果浏览器调整大小,则呈现正确的CSS,甚至是像素.

有谁知道这到底发生了什么,或者是否有快速修复？我能够想到的唯一解决方案是通过重新排序我的CSS并添加新的媒体查询来解决这个问题,我希望避免更新代码.

Helo伙计们,我想修改导航栏以便崩溃@screen-md :992px;.我已修改navbar.less,但仍然无法工作,我不知道该怎么做.

那么如何修改@grid-float-breakpoint变量以便在自定义媒体查询大小上折叠该菜单？

小提琴:

我有4个媒体查询.第1,第3和第4工作,但第2工作似乎没有激活.

为什么480x720(第二个媒体查询)默认为第一个媒体查询？

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

预期结果:

实际发生了什么:

为什么480x720(第二个媒体查询)默认为第一个媒体查询？

这是一些HTML:

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe>
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

该test.html页面包含来自外部文件的一些CSS:

<link rel="stylesheet" type="text/css" href="style.css" />

样式表有:

@media all and (max-width: 600px) {
  body {background-color: red;}
}

以上是简化的,但足以证明问题:两个页面都是红色的,尽管其中一个明显比另一个更宽.演示页面

是什么赋予了？

(注意:在IE和Chrome中测试过 - Chrome很好,一帧红色,另一帧白色.)

是否可以使用Javascript或jQuery动态创建完整的媒体查询规则？

我使用了大量的媒体查询来使用内联CSS,导入和链接文件来定位通用视口和特定设备/屏幕:

@media screen and (min-width:400px) { ... }
@import url(foo.css) (min-width:400px);
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="foo.css" />

我可以使用jQuery添加/删除类:

$("foobar").click(function(){
  $("h1,h2,h3").addClass("blue");
  $("div").addClass("important");
  $('#snafu').removeClass('highlight');
});

我也看一下,document.stylesheets看似古老而且特定于浏览器:

  document.styleSheets[0].insertRule("p{font-size: 20px;}", 0)

但我找不到任何以编程方式生成的引用:

  @media screen and (min-width:400px)

直接或以任何形式从javascript.

我想在小屏幕尺寸中使用天的缩写.
例如,当屏幕缩小时,我想将"星期六"更改为"星期六".
我怎样才能做到这一点？

我正在使用普通桌面屏幕的媒体查询,idt不适用于大屏幕.但是下面的媒体查询也适用于大型桌面屏幕.请更正我的媒体查询,提前感谢所有帮助.

@media (min-width: 992px) and (max-width : 1200px){//This should work for Normal desktops(15 to 18 inch) only.
}

我应该如何处理作为 Tailwind 组件的响应式断点？

没有 Tailwind，我曾经将断点声明为 scss mixins：

@mixin tablet-portrait {
  @media (min-width: 700px) {
    @content;
  }
}

然后：

@include tablet-portrait {
  // whatever
}

我知道 Tailwind 具有响应式实用程序类来内联使用它，md:color-red但我需要将此断点抽象为组件，如上例所示。

我应该如何从 Tailwind 配置文件中提取 Tailwind 断点？

在Firefox 67中，人们可以使用媒体查询来检测用户对浅色或深色主题的偏好。

在我的Firefox版本（在Ubuntu下）中，我的偏好似乎是轻主题。也就是说，以下CSS给出了蓝色背景：

@media (prefers-color-scheme: light) {
   :root {}
  body {
    background-color: blue;
  }
}

如何更改Firefox首选项，使其prefers-color-scheme: dark 评估为true？

我发现一个似乎可以解决问题的加载项，但是我自己的CSS一定做错了，因为它在我的页面上不起作用。 黑暗的网站力量