显示后，媒体查询中的浮动内容不适用于输入：
迈克尔·劳顿
使用以下代码，当视口大于320px时，输入应与文本在同一行。它在第一页加载（激活媒体查询）时按预期工作，但是将视口调整为320px以下后float: left，即使视口再次放大，该视口也将不再起作用。
视口> = 320px时的预期结果
调整视口大小后<320px
将视口重新调整为> = 320px时的结果
仅当满足以下条件时，才会表现出此行为：
- 浏览器是谷歌浏览器
- 浮动元素是
input（任何类型） float规则在媒体查询中- 浮动元素默认为
display: block不应用媒体查询 float规则被禁用（通过调整视口大小或在开发工具中），然后再次启用
我在Ubuntu 14.04上使用Chrome 41.0.2272.101（64位）。该行为在同一平台上的Firefox 38.0中没有表现出来。我尚未测试任何其他浏览器。
.text {
display: inline-block;
}
input {
display: block;
}
@media only screen and (min-width: 320px) {
input {
float: left;
}
}<div class="text">Text</div>
<input type="text">您可以在这里尝试：https : //jsfiddle.net/ws2guLrq/1/
西姆尼斯
这可能是您要查找的内容，请max-width改用并在其中切换参数。
.text {
display: inline-block;
}
input {
float: left;
}
@media only screen and (max-width: 319px) {
input {
float: none;
}
}
如果我正确理解了您的问题，那么这就是您想要的，我只在Chrome中进行了测试。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS媒体查询不适用于Android设备
- 2
媒体查询不适用于ie和电话
- 3
我的LESS数学运算不适用于我的媒体查询定义
- 4
CSS媒体查询不适用于Iphone（Chrome和Safari）/ Apple MBP Safari
- 5
媒体查询不适用于离子项目
- 6
具有绝对位置和内嵌位置的媒体查询，似乎不适用于Chrome
- 7
媒体查询打印不适用于javascript命令
- 8
浮动：无不适用于媒体查询
- 9
媒体查询不适用于VueJS样式标签
- 10
媒体查询适用于Chrome，但不适用于移动设备
- 11
媒体查询不适用于CSS网格布局
- 12
媒体查询不适用于Safari
- 13
媒体查询不适用于iPhone Safari浏览器
- 14
CSS中的媒体查询不适用于其他宽度
- 15
媒体查询不适用于浏览器或移动设备
- 16
媒体查询打印不适用于javascript命令
- 17
浮动：无不适用于媒体查询
- 18
媒体查询适用于手机，但不适用于平板电脑
- 19
媒体查询不适用于某些类的Bootstrap，但适用于其他类
- 20
CSS媒体查询不适用于Samsung Galaxy
- 21
媒体查询不适用于较小的屏幕尺寸
- 22
媒体查询不适用于中等范围
- 23
表格显示块不适用于媒体查询
- 24
输入字段中的显示值不适用于 JavaScript
- 25
聚合物铁媒体查询不适用于 dom-repeat 元素
- 26
我的媒体查询不适用于 google chrome 和 firefox
- 27
媒体查询不适用于手机，但响应性适用于桌面
- 28
属性显示不适用于媒体查询
- 29
响应式网站不适用于 Css 中的媒体查询
我来说两句