-2

对的人，这里有一点讨论——

我正在创建一个带有 div 和 HTML5 标准的网站。但是，由于我的屏幕分辨率，我的网页只适合 1440x900。我必须使用 CSS 媒体查询来调整页面大小以适应 800 x 600 桌面分辨率，但这里有一个想法：

  1. Photoshop 也可以调整大小，但使用切片和切块表，无需其他代码或 CSS 调整。当表格可以帮助您自动调整每个分辨率（即使对于移动网站）的大小时，表格真的那么糟糕吗？

  2. 如果您的 CSS 媒体查询遇到一个拥有窗口浏览器屏幕的人，例如用户拥有 768 x 560 而不是全屏 800 x 600 分辨率浏览器，该怎么办？这是否意味着您的 CSS 媒体查询需要定义该分辨率以适应窗口大小？（我在这里想说的是，我的媒体查询只适合定义大小为 320 像素、480 像素、600 像素、768 像素、1024 像素、1400 像素的浏览器，除此之外，这些值使屏幕正确显示。）

  3. 我目前正在使用 CSS3 媒体查询，但我必须定义很多分辨率大小（从 320 像素、480 像素、600 像素、768 像素、1024 像素、1400 像素的宽度）。这真的有必要吗？

4

3 回答 3

2

  1. Photoshop 不会帮助您“在每个分辨率上自动”调整网站设计的大小。事实上，随着这些天的发展——几乎不可能知道未来任何设备上的分辨率是多少。我相信 Android 操作系统现在有超过 100 种不同的分辨率。还要记住，Photoshop 确实是一个图形程序。

  2. 虽然媒体查询利用了断点的概念，但它们最好与流体设计的概念结合使用（使用百分比而不是固定宽度/大小）。您实际上不需要定义媒体查询来适应每个常见的监视器宽度。最好使用流畅设计的原则，然后当事物在某个点或宽度变得过于拥挤/间隔开时，使用媒体查询（断点）来更改布局/设计以适应屏幕/浏览器窗口的物理尺寸.

  3. 这可能是必要的，也可能不是。同样，这取决于您是否想在某个时候更改您的设计。也许尝试设计一个只有百分比的网站只是为了看看有什么可能，然后当事情变得丑陋或在视觉上不能很好地浮动时，在这些断点处放置一些媒体查询并调整浮动和比例以满足您的需求。

于 2012-05-24T03:45:22.983 回答
1

Photoshop 不允许重新调整您必须手动执行的页面大小.. 以及您的其他点媒体查询我设计了很多带有 1 个 css 的网站只需应用 css 之类的

<body style="width:100%">
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
</body>

这将自动调整所有设备桌面和移动设备中的所有内容。

于 2012-05-24T07:10:23.573 回答
0

当您开发基于不同设备的应用程序时。看 960.gs真的很好，而不是依赖于 css 媒体查询。即使它涉及一两天的学习曲线，它也让我们的生活更轻松。

于 2012-05-24T13:44:51.683 回答