如何设计独立于CSS的分辨率元素？

Question

我是网络开发的新手。我的系统有1280 * 800分辨率。当我设计CSS元素时，我必须提供像素的位置。如果我为我的分辨率设计，同样的页面可能看起来很小。

如何设计独立于分辨率的CSS元素

Answer 1

首先，您可以尽可能使用相对测量单位（百分比，em等）。

其次，另一种常见的技术是针对不同的分辨率使用不同的样式表（或者至少是宽度，这往往是重要的）。

定义最小宽度然后将宽度固定在此处是相当常见的。 960像素现在相当常见。

Answer 2

首先要做的是选择一个支持最低分辨率的站点，而不需要水平滚动。请参阅W3 Schools作为指南;他们目前至少有93％的浏览器报告1024x768或更高版本，因此这是一个很好的起点。

接下来要决定固定宽度与可变宽度。例如，如果所有机器都以与您在上面定义的最小分辨率兼容的相同固定宽度渲染网站，或者元素是否应在水平可用的整个空间中流动。固定宽度选项更可预测，但可变宽度可以更好地利用屏幕空间。

最后，尽量避免显式宽度或左/右定位沿着可变宽度路径。这适用于某些页面元素，例如导航列，它总是呈现相同的宽度，但其他元素（如主页面内容）需要扩展到任何明确的边界之外。最好的选择是定义父容器的宽度（它可能只是100％，这是div元素的默认值），然后允许子元素填充容器并让浏览器相应地呈现宽度。 / p>

Answer 3

从一些关于液体（又称弹性）布局和网格布局的文章开始（您可以在任何引擎上搜索这些术语）。这些文章的一个很好的来源是Layout Design section on A List Apart。特别是，Fluid Grids有很多信息和许多关于最新设计技术的资源链接，包括一些最流行的网格布局设计CSS框架。 How To Size Text In CSS具有很多信息，如何远离绝对像素并使用em和百分比。 Multi-Column Layouts Climb Out Of The Box还有一些有关液体布局和一些不错链接的有趣信息。