html - 使用 CSS 媒体查询

Question

我最近问了一个关于分辨率的问题，以及如何在我的 ASP.NET Web 应用程序中修复它。

根据我得到的一些答案，我发现媒体查询是一个不错的去处。

我已经像下面这样设置了我的 CSS 文档:

@media only screen and (max-width: 640px) {
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
}

@media only screen and (min-width: 801px) and (max-width: 1024px) {
}

@media only screen and (min-width: 1025px) {
}

我一直在 1600x800 下开发，我想知道我如何知道我需要将对象的大小更改为什么。我是否必须在较小的浏览器中重新开发应用程序，或者是否有更简单的方法。

HTML:

<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>

Answer 1

该方法与您在不使用媒体查询的情况下编写 CSS 时的方法基本相同。您仍然需要处理不同的窗口大小。

1. 拖动窗口边缘使浏览器变小
2. 看看设计的效果如何
3. 调整CSS
4. 刷新页面