Question

我正在研究@media，并想知道创建一个根据网页宽度而变化的网站的最有效方法是什么。

此处我正在使用（背景颜色更改是为了显示更改）：

@media (min-width: 1001px) {
    body {
        background:#000;
    }
}
@media (max-width: 1000px) and (min-width: 700px) {
    body {
        background:#555;
    }
}
@media (max-width: 699px) and (min-width: 520px) {
    body {
        background:#AAA;
    }
}

每次写出@media查询是最有效/＆＃34;最佳＆＃34; 方式吗？

Answer 1

你应该尝试先'移动'，这意味着开发移动屏幕，然后根据不同屏幕尺寸的需求变化来编辑媒体查询中的样式。

'min-width'表示它会影响您设置的最小宽度的屏幕尺寸的样式，因此不需要max-width。

 @media screen and (min-width: <Enter width in px>) { }

 @media screen and (min-width: <Enter width in px>) { }

 @media screen and (min-width: <Enter width in px>) { }

Answer 2

没有最好的方法，因为最好的方法是根据需要定义媒体查询。设备尺寸不断变化，如果您根据其他人推荐的尺寸建造您的网站，那么这些尺寸很可能会在不到一年的时间内过时。

Microsoft.com实际上是我最喜欢的例子之一。如果您查看他们的网站并将其扩展到屏幕允许的范围，您就会注意到该网页的设计看起来非常适合每个像素大小，而不仅仅是预设点。

首先从小屏幕（您要支持）开始，然后展开直到看起来像狗屎。是时候断点了！ - Stephen Hay

另外

7 Habits of Highly Effective Media Queries

@media和＆＃34;最好的方式＆＃34;创造＆＃34;响应＆＃34;网站

2 个答案:

另外