css设置最小宽度消失,关于css：最小/最大宽度媒体查询没有语法意义 -凯发k8官方网
我发现(最小宽度/最大宽度)媒体查询的概念有些混乱。
自然，如果我要设计媒体查询，我想说(用伪代码)。
if(screen.width < 420)
{
applystyle();
}
谈论min和max的概念没有任何意义，因为div元素之类的"最小宽度"是命令而不是问题。
我知道以下内容适用于我的屏幕低于420px的情况...
@media screen and (max-width:420px) {
}
我只是不知道为什么，因为我告诉它最大宽度。 如果我告诉它有东西，为什么css检查它？ 当然，它已经知道了。
我可能在这里缺少语法/上下文。 有人可以解释一下吗？
我完全赞成你。 作为程序员，if(screen.width < 420)使soooo更加有意义，并且可以立即理解。
媒体查询中的min-width与您在元素上设置的min-width属性无关，这是两件事。
在媒体查询中，如果视口的宽度大于或等于x，则min-width: x为true，有效用作screen.width >= x。显然max-width将等于screen.width <= x
对我来说，这很有意义，如果您将@media screen and (max-width:420px)读为最大宽度为420px的屏幕，那么0到420px之间的任何值
我不得不回到这个问题上，并且意识到您的答案实际上是正确的答案。 最后一句话为我钉上了钉子。 谢谢！
是的，对不起，我只是迷失了所有原始内容，然后在这里的最后一句话中磨练了一下。 我希望没有难过的感觉！
这是一个简单的示例，希望对您有所帮助。
假设我们有一个包含以下媒体查询的网站：
/* #1- large desktop */
@media (min-width: 980px) { ... }
/* #2- portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* #4- landscape phones and down */
@media (max-width: 480px) { ... }
如果浏览器的屏幕尺寸为1200px，则查询＃1将得到满足，因为要显示此查询，浏览器的最小宽度必须为980px。
可以说我们现在调整浏览器的大小，并将其一直缩小到250px。由于最大为480px，所以满足了查询4。
这是查询的简单翻译。
@media (min-width: 980px) { ... }
如果屏幕大于或等于980px，则显示
@media (min-width: 768px) and (max-width: 979px) { ... }
如果屏幕大于或等于768px且小于或等于978px，则显示
@media (max-width: 767px) { ... }
如果屏幕大于480像素且小于或等于767像素，则显示。
@media (max-width: 480px) { ... }
如果屏幕小于或等于480像素，则显示
使用这些查询，您将始终得到结果，因为始终可以满足一个查询。
这里的困惑在于，同时存在一个min-width css属性和具有相同名称的媒体查询：
@media (min-width: 420px) {...} /* this is read-only and is set to screen size */
.element { min-width: 420px; ...} /* this is setting a property of the selected element */
总结
以上是凯发k8官方网为你收集整理的css设置最小宽度消失,关于css：最小/最大宽度媒体查询没有语法意义的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：