标签: media-queries

是否有可能jQuery修改特定媒体类型的CSS(例如打印)？

我的具体问题是我在元素上使用动画并且它覆盖了打印样式表,这会破坏我的打印布局.虽然我的问题与提出的一般问题略有不同,但我认为答案可以帮助我解决我的问题.任何可能的解决方法也会有所帮助.非常感谢.

在横向模式下只为iPhone编写css的方法相同吗？谢谢

Ive mobile通过媒体查询优化了我的网站.一切看起来我都喜欢它,但是不必要的图像(因为它们被css隐藏)被下载,减慢了页面加载时间.

对此最简单的解决方案似乎是使用背景图像替换尽可能多的内嵌图像.然后我可以用移动版本的媒体查询css隐藏div.

我知道这有潜在的缺点,在这篇文章中概述: 何时使用IMG与CSS背景图像？

因此,公司徽标,员工照片等将保留为内嵌图像.

我没有考虑过我的方法有什么问题吗？我已经阅读了很多关于移动优化的内容,特别是有关媒体查询的内容,我甚至没有听说过有人这样做过,尽管这似乎是一个非常明显的解决方案,其中图像可以是内联或背景.

注意,香港专业教育学院做了一些iPhone和Android的实验(即时通讯等待获得一些Blackberrys),我知道要停止下载背景图像我需要将显示无设置为div的父级,而不是背景图像本身的div.

注意2,在理想的世界中,网站可能首先被构建为移动设备,但在这种情况下(通常在其他情况下),原始网站的修改数量有限.

谢谢

我一直在阅读文档,并将我的代码与Bootstrap的示例进行比较,但是当我将浏览器窗口缩小或在手机上查看时,我无法弄清楚为什么我网站上的导航栏会下降大约100px.

http://warm-ocean-8133.herokuapp.com/

这是我的jade模板格式的html.

.navbar.navbar-fixed-top
  .navbar-inner
    .container
      a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.brand(href='#home') Miles Matthias
      .nav-collapse
        ul.nav
          li.active
            a(href='#home') Home
          li
            a(href='#contact') Contact

这是一些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很好,一帧红色,另一帧白色.)

我最近开始使用LessCSS,并且我在CSS的清晰度和可读性方面取得了相当大的成功.但是,我认为我并没有充分利用Less.

我现在正在使用Less编写我的第一个完全响应的站点,我关注性能和速度. 有一点需要注意的是,我不坚持使用"断点"方法 - 我会一直上下缩放直到它们中断,然后我编写CSS来修复它们; 这通常导致20到100个媒体查询.

我想开始使用Less来将媒体查询嵌套在我的元素中,例如下面的示例:

.class-one {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}
.class-two {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}

通过我的初步测试,我发现在查看编译的CSS输出时 - 这种方法导致多个(很多!)实例@media (max-width: ___px).我已经浏览了互联网,并没有找到任何明确解释嵌套/冒泡媒体查询的性能影响的内容.

更新1:我意识到更多的CSS信息导致更大的CSS文件下载 - 但我并不担心网站加载时间作为唯一的指标.在DOM准备好之后,我对浏览器对内存和性能的处理更感兴趣.

更新2和半解决方案:我发现这篇文章讨论了CSS选择器的四个主​​要类别及其效率.我强烈推荐阅读,这有助于我理解如何最好地解决我的过度媒体查询CSS.

所以我的问题是: 在DOM准备好之后,在我编译的样式表中有这么多媒体查询会影响加载时间和性能吗？

我目前正在使用媒体查询创建响应式网页设计.对于移动设备,我想删除我的JS滑块并将其替换为其他东西.我已经查看.remove()了JQuery库中的一些其他内容,但是这些必须在HTML中实现,我无法从css角度考虑解决方法.

我正在使用媒体查询处理响应式设计的网站.但我不知道如何采取良好的宽度设置.

正如您在此表中所看到的,即使对于单一类型的设备,也存在许多不同的分辨率.随着移动设备上的分辨率越来越高,很难知道适用于特定分辨率的设计.

现在,我正在使用这个:

移动优先

@media screen和(min-width:720px)=> Phablet

@media screen和(min-width:768px)=>平板电脑

@media屏幕和(min-width:1024px)=>桌面

感谢您的任何建议或推荐!

我希望摆脱媒体查询,只是使用flexbox来解决我的问题,但我不确定这是否可行.随着窗口变小,我希望列缩小,直到它们达到最小宽度.一旦它们击中,中间列将跳下来进行包裹.

我认为我的问题可以归结为这一点 - 当它包装时,它可以检测到弹性盒吗？如果是这样,我可以提示它改变严格的CSS包装项目的顺序吗？

这里是一个codepen的我"米尝试使用媒体查询来实现.

.wrapper {
  display: flex;
  justify-content: center;
  margin: 5px;
  flex-wrap: wrap;
}

.red {
  background-color: red;
  height: 240px;
  margin: 5px;
  width: 500px;
  order: 0;
}

.yellow {
  background-color: yellow;
  margin: 5px;
  height: 240px;
  min-width: 240px;
  max-width: 400px;
  flex: 1;
  order: 1;
}

.blue {
  background-color: blue;
  height: 240px;
  margin: 5px;
  min-width: 350px;
  max-width: 400px;
  flex: 1;
  order: 2;
}

@media (max-width:1130px) {
  .yellow {
    order: 4;
  }
}

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div> …

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

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

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

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

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