标签: media-queries

我正在使用 Bootstrap 3。基于媒体查询应用不同 CSS 类的最佳方法是什么？当它是移动设备时，我需要应用 Bootstrap col-xs 类，但仅当它是桌面版本（md，lg）时才应用自定义 CSS 类。现在我有 2 个 div，一个基于媒体查询可见，但我不想因此而重复 DIV。

我知道我可以将 col-md 和 col-lg 应用于 DIV 并且我在很多地方都这样做，但这种情况不同。在移动设备中，我想应用 col-xs-2，但在桌面版本中，我需要让它表现得像一张桌子，所以我使用 display:table。

假设我有一个带有键盘快捷键的网站，我想在其中直观地显示所述键盘快捷键，作为它们应用到的任何元素的一部分。

在触摸界面上，尤其是手机上，我不想打扰，因为：

1. 没有人会这样使用软键盘，即使他们可以
2. 键盘快捷键的视觉显示占用了宝贵的空间
3. 在无键盘上下文中显示键盘快捷键可能会令人困惑，或者至少不优雅

然而，媒体查询文档似乎没有提到这一点。

都2016年了，这还不可能吗？

如何在 360px - 640px 之间应用媒体查询。这与我的(max-width: 320px)媒体查询重叠。

@media screen and (min-width:360px) and (max-width:640px) and (orientation : landscape)

我出现问题的网页

我的 Bootstrap (v3.3.5) 布局 css 在 767px 处遇到了仅 Chrome 的问题，其中布局样式根本没有被应用。

这是在 3 个浏览器上尝试控制台后的行为...

Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout

Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout

Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari …

我在打印模块内容时遇到问题，所有浏览器都会发生这种情况。当我打印模态内容时，它只预览第一页，第一页之后的任何内容都会被切断。我已经尝试在 Chrome 打印模拟器中进行调试，但仍然无法找到解决方案。

在某些时候，我向打印模拟器添加了一个滚动条，我可以向下滚动以查看所有内容，但是当我打印预览时，它显示滚动条并且仍然在第一页之后切断任何内容。我不知道为什么打印预览与模拟器的表现如此不同。

该项目处于反应状态，不使用任何第三方库（如 bootstrap modal）的普通模态。

印刷媒体查询：

@media print {
  body, html {
    height: 100%;
    overflow: visible !important;
  }

  .account-header {
    display: none;
  }

  .list-wrap {
    height: 100%;
    // overflow: scroll !important;
  }
  .account-content {
    margin: 0;
    padding: 0;
    border: 2px solid red;
    position: absolute !important;
    overflow: visible !important;
    visibility: visible !important;
    display:block;
  }

  .account {
    background-color: none !important;
    display: inline-block;
    font-size: 12px;
    border: 1px solid blue;
  }
}

注意：.list-wrap 是一个应用于 .account-content 的父容器的类。使用 overflow: scroll 样式会向打印模拟器添加一个滚动条，我将能够在那里看到所有的模式内容。但在实际打印预览中，它仍然只显示第一页。

我注意到 css 媒体查询定义和 javascript window.matchMedia 媒体查询定义之间的区别：

css 规则最初应用于加载的页面。

javascript 中定义的规则不会在页面加载后执行，而只会在输入新条件后执行。

一个例子：

我有两个具有等效媒体查询定义的不同页面，第一个在 css 中定义，第二个在 javascript 中定义：

css 版本（在样式元素中定义）：

@media (min-width: 401px) and (max-width: 600px) { body {background-color: red; } }
@media (min-width: 601px) and (max-width: 800px) { body {background-color: blue; } }

javascript 版本（在全局或在主体加载后调用的函数中定义）：

window.matchMedia("(min-width: 401px) and (max-width: 600px)")
.addListener(function(e) {
  if (e.matches) {
    document.body.style.background = "red";
  }
});

window.matchMedia("(min-width: 601px) and (max-width: 800px)")
.addListener(function(e) {
  if (e.matches) {
    document.body.style.background = "blue";
  }
});

当我加载页面并且窗口宽度为 700 像素时

• css版本页面是蓝色的
• javascript 版本是白色的，只有在满足新条件后才会更改其状态，即窗口大小低于 …

我已经尝试了无数解决方案来解决这个问题，但没有一个解决了我的问题。我非常简单地有一个导航栏，当在移动浏览器上时，它会消失并被一个按钮取代，其功能是显示和隐藏导航栏。

现在，我希望我的侦听器在窗口缩小时显示按钮并隐藏导航栏。当窗口展开时，按钮应隐藏，导航栏应显示。该按钮正常工作，因为媒体查询不会影响它。我的侦听器似乎根本不运行，除非重新加载页面。

我的脚本包含在 PHP 标头内，该标头包含在我所有页面的开头。这是我所得到的：

媒体查询侦听器（包含在 header.php 代码中）

// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
    var content = document.getElementById("navigation");
    if (inputQuery.matches) {
        // it matches
        content.style.display = "none";
    } else {
        // it does not match
        content.style.display = "block";
    }
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag

该元素#navigation是一个包含导航栏的 div 元素。如有必要，我将提供任何其他相关代码。

我可以让媒体查询在常规styled-components组件中正常工作，但是当我尝试在keyframe（通过 import from styled-components）中使用它时，它似乎根本不起作用。

试图让 div 动画到特定位置，但是当窗口 < 800px 时改变结束位置，我尝试过：

import styled, { keyframes } from 'styled-components';

// ... further down ...

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;
  }

  @media (max-width: 800px) {
    top: 70px;
    left: 50px;
    }

`;

我还尝试将媒体查询放在100%块中：

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;

    @media (max-width: 800px) {
       top: 70px;
       left: 50px;
    }
  }
`;

我对我想要实现的目标做了一个有用的交互式演示（问题代码在第 24 行）：https : //codesandbox.io/embed/fragrant-star-m71ct

breakpoint如果需要，请随意更改800 …

我和我的团队领导就媒体查询的使用发生了一些争执。关于使用媒体查询有两种方法（据我所知）。

方法一：

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .container {
    width: 90%;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    width: 80%;
  }
}

方法二：

.container {
  @media only screen and (max-width: 600px) {
    width: 100%;
  }

  @media only screen and (min-width: 600px) {
    width: 90%;
  }

  @media only screen and (min-width: 768px) {
    width: 80%;
  }
}

我是一名初级开发人员，我发现第二种方法更容易使用和理解。但是我的老板告诉我使用第一种方法。老实说，我到处寻找使用我喜欢的第二种方法的示例项目，但找不到！

所以我的问题是为什么？

在我看来，如果我想在这个例子中添加一些类来包装容器，在方法 1 中我需要在每个断点中添加它，而在方法 …

我想通过选择器使用新的CSS 功能查询，如下所示：

:root { --focus-shadow: 0 0 0 2.4px rgba(130, 138, 145, 0.5); }

/* Focus styles even for mouse selection in old browsers */
*:focus { outline: none; box-shadow: var(--focus-shadow); }

/* Newer browsers: Only add focus styles if e.g. navigating with the keyboard */
@supports selector(*:focus-visible) {
  *:focus { box-shadow: none; }
  *:focus-visible { box-shadow: var(--focus-shadow); }

<a href="#">Focus me</a>

以上是有效的 CSS（尽管截至 2020 年 6 月支持不佳），但 Sass 在其两个实现中的任何一个中都不支持它。它正在开发中，但看起来它需要一段时间才能实现。尝试通过 Sass 编译上述内容会引发错误（因 Sass 实现而异；有关错误的详细信息，请参阅 …