Css 最大宽度与最小宽度

发布于05月20日

我正在阅读的大多数使用媒体查询的教程都演示了min-width的用法，但我很少看到有人使用max-width.

这是不是某种设计趋势，或模式，为什么人们使用min-width而不是max-width？

例如，我正在设计一个从移动到桌面的网站.我正在使用基础4，但是使用媒体查询来删除页面上的各种元素并重新定位源代码顺序.

我面临的一件事是为任何宽度小于等于360px的设备定制导航.我希望他们有一个垂直导航，而不是一个水平的内联导航.所以我的 idea 是用max-width来瞄准这些设备.

如果我先设计手机，我应该用min-width代替吗？即所有的默认样式都是针对移动的，因此使用min-width来逐步增强布局？

推荐答案

这真的取决于样式表的工作方式.例如:

@media screen and (min-width:100px) {
    body { font-weight:bold; }
}

@media screen and (min-width:200px) {
    body { color:#555; }
}

如果屏幕大于或等于bodypx，上述两个媒体查询会将body字体设置为粗体，但如果屏幕大于或等于200px，则also将 colored颜色设置为#555；

另一个例子:

@media screen and (max-width:100px) {
    body { font-weight:bold; }
}

@media screen and (max-width:200px) {
    body { color:#555; }
}

与第一个示例不同，只有当屏幕宽度在0到bodypx之间时，才会使用body字体粗体和#555 colored颜色 .如果在0px和200px之间，则为#555色.

媒体查询的美妙之处在于，您可以将这些语句组合在一起:

@media screen and (min-width:100px) and (max-width:200px) {
    body { font-weight:bold; color:#555; }
}

在本例中，您只针对宽度在100px和200px之间的设备——不多也不少.

简而言之，如果你想让你的样式在媒体查询中达到leak，你可以使用min-width,or,max-width，但是如果你想影响一个非常具体的条件，你可以把这两个结合起来.

实用课程推荐