CSS Media Query min-width无法正常工作

我有一个像这样的HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code: NewYork</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
    <input type="text" />
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我的CSS是:

input {
  background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    input {
        background-color: green;
    } 
}

Run Code Online (Sandbox Code Playgroud)

现在,当窗口宽度为909像素时,CSS会应用.显然不是滚动条问题.我对这个简单的问题感到困惑.我用Chrome和IE10测试它们都是一样的.

任何人都可以帮助我在这里做错了吗？

css css3 media-queries

Tua*_*uan

2014 09-30

11
推荐指数

2
解决办法

2万
查看次数

SwiftUI 相当于 UIViewController 的输入附件视图，即键盘上方的视图始终可见，就像在 iMessage 中一样

UIViewController 上的简单输入附件视图

我想要一个像 iMessage 中那样的输入附件视图。该栏始终在屏幕底部可见。当 TextField 获得焦点时，键盘会跳入，并且栏会自动向上移动，同时停留在键盘顶部。

即使没有 TextInput 具有焦点，输入附件也必须可见

在 UIKit 中，ViewController 可以覆盖 inputAccessory 并成为第一个响应者。因此输入附件永久可见。我找不到在 SwiftUI 中执行此操作的方法。

键盘和配件必须缩小滚动视图

当键盘弹出时，保存消息并填充屏幕的滚动视图必须相应缩小。向下拖动滚动视图和交互移动键盘时也是如此。拖动时必须调整视图的大小。

最重要的是：向下拖动滚动视图并交互移动键盘时必须起作用

最重要的要求是，在拖动滚动视图（以交互方式向下移动键盘）时，这必须顺利工作。iMessage 或 WhatsApp 中的行为相同。输入附件必须在拖动时移动，并且滚动视图也必须调整大小。键盘关闭后，工具栏/输入附件必须在底部保持可见。

不是重复的

我阅读了InputAccessoryView / View Pinned to Keyboard with SwiftUI，但这与我的问题不相似。我需要工具栏可见，即使键盘未显示。此外，该问题中接受的答案在 iOS 15 中无法正常工作。拖动以关闭键盘会留下白色间隙。

UIKit 工作原理

在 UIKit 实现中，持有视图是一个带有键盘关闭交互集的 UITableViewController。这意味着，当显示键盘时，您可以拖动视图，并同时向下拖动键盘和附件视图，直到键盘消失。不过，附件视图仍然保留在底部。

在 UIKit 中的实现非常简单，如下所示。一切都是开箱即用的。

class ChatTableViewController: UITableViewController {
...

    override var inputAccessoryView: UIView? {
        return inputBar
    }

    override var canBecomeFirstResponder: Bool {
        return true
    }
...
}

Run Code Online (Sandbox Code Playgroud)