标签: media-queries

当涉及媒体查询和浏览器缩放时，我遇到了一个非常奇怪的问题。

我使用的是 Chrome 52.0.2743.116 m。

问题是这样的：

当您使用浏览器缩放至 125% 并调整浏览器大小直到平板电脑应该启动（最大宽度：1024px）时，似乎有那么一刻 max-width: 1024px 或 min-width: 1025px 都不起作用真的。

如果我将其更改为 max-width: 1024.9px - 它可以工作。

这是一个简单的例子：

<div class="box">
   Text
</div>
<div class="box">
   Text
</div>
<div class="box">
   Text
</div>

还有CSS：

@media (max-width:768px) {
    .box {
        background: blue;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .box {
        background: red;
    }
}

@media (min-width:1025px) {
    .box {
        background: green;
    }
}

示例： http: //codepen.io/tomusborne/pen/EyrNvG

放大 125%，然后缩小直至变成红色。逐个像素地调整大小，您会发现平板电脑和桌面之间的一个像素根本没有背景颜色。

有人知道这是怎么回事吗？使用 1024.9px 是一个不错的解决方案吗？我是不是要疯了？

我想将 padding-left 更改为 769px 和 1340px 之间的 24px，但我当前的媒体查询不起作用。寻求解决这个问题。

@media(min-width:1340px){
    .target-side-col li{
        padding-left:60px;
    }
}

@media(min-width:769px && max-width:1340px){
    .target-side-col li{
        padding-left:24px;
    }
}

我想编写一个响应式流体电子邮件模板，在其中我可以在不使用媒体查询的情况下堆叠 3 列。当宽度小于表元素的两个最小宽度之和时，我可以使用以下代码使它们浮动并堆叠。但是当宽度超过这个值时，只有第三列被堆叠，其余两列仍然是内联的。

如何在不使用媒体查询的情况下堆叠它们？如果可能的话。

         table {
          }
          tr{
          	background-color: lightblue;
			
              min-width: 160px;
          }
          td{
          	display:block;
              width:33%;
              background-color: green;
              margin-left:auto;
              margin-right: auto;
              text-align: center;
              padding:0px;
              float: left;
              min-width: 160px !important;
              
          }

    <table width="100%" bgcolor="green">
          <tr>
              <center>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              </center>
          </tr>
      	
      </table>

JsFiddle： https: //jsfiddle.net/o8gov8oe/

问题：

预期解决方案：

我在 React 中有一个按钮，它执行 onClick 函数。我想去掉该按钮，而是在窗口宽度 < 1000px 时以编程方式执行该函数。

一个限制是我无法添加插件。

代码如下......

// Do I need useState, useEffect?
import React, { PureComponent } from "react";

class MainNav extends PureComponent {
state = {
  // Does something go here? What goes here and how do I use
  // state to execute the function?
  navIsCollapsed: false,
};

// this controls rendering of huge images
toggleShowImages() {
  this.setState({
    navIsCollapsed: !this.state.navIsCollapsed,
  });
}

// I want this to be executed by width < 1000
handleSideNavToggle = …

我正在创建一个移动应用程序，但遇到一些错误。

这里我的核心风格是针对桌面的：

.abc{
     width:1001px;
}

@media only screen and (max-width : 320px) {
.abc{
     width:320px!important;
}
}
@media only screen and (max-width : 480px) {
.abc{
     width:480px!important;
}
}

从上面的样式中，只有 480px 的样式同时适用于 320px 和 480px。

有没有其他建议来解决这个问题。

我需要在 A4 纸上打印，每张纸都<div>从不同的页面开始

<div id="1">
  //content
 </div>
 
 <div id="2">
  //content
 </div>
 
 <div id="3">
  //content
 </div>
 
 ....

例如，内容<div id="1">可能有 2 或 3 页，但<div id="2">仍需要从新页面开始。