Html 如何设计分辨率无关的CSS元素？

我是网络开发新手。我的系统有1280*800分辨率。当我设计CSS元素时，我必须给出像素的位置。如果我为我的分辨率而设计，同一页在小监视器中可能看起来很大

---

如何设计分辨率无关的CSS元素首先，您可以尽可能使用相对测量单位（百分比、em等）

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

---

定义一个最小宽度，然后将宽度固定在该最小宽度是很常见的。960像素现在相当普遍。

首先要做的是为站点选择一个最低分辨率，以支持无水平滚动。作为指南参考；他们目前报告至少有93%的浏览器是1024x768或更高版本，所以这是一个很好的起点

下一步是决定固定宽度和可变宽度。例如，是否所有计算机都以与上面定义的最小分辨率兼容的相同固定宽度渲染站点，或者元素是否水平地流过整个可用空间。固定宽度选项更容易预测，但可变宽度可以更好地利用屏幕不动产

---

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

从一些关于液体（也称为弹性）布局和网格布局的文章开始（您可以在任何引擎上搜索这些术语）。这类文章的一个很好的来源是。特别是，这篇文章有很多关于最新设计技术的信息和资源链接，包括一些最流行的用于网格布局设计的CSS框架。这篇文章有很多关于如何远离绝对像素并使用em和百分比的信息。这篇文章也有一些兴趣查看有关液体布局的信息和一些不错的链接。

web开发人员在设置所有分辨率的相同外观时使用的常见宽度和高度是什么？请不要将W3Schools用作web统计信息的参考，他们的受众是有技术头脑的，而不是一般web用户的典型。请随意提供替代site Rory。过去我用过，但现在看来有点可疑，似乎把Chrome作为Safari…我认为我必须去寻找更好的源代码。它可能把Chrome作为Safari，因为它们都是WebKit浏览器。很可能是Mark，WebKit在接受头中传递给这两个浏览器，但它们也是显式的这是我从中得到的：Mozilla/5.0（Windows；U；Windows NT 6.1；en-US）AppleWebKit/533.4（KHTML，像Gecko）Chrome/5.0.375.70 Safari/533.4 Mozilla/5.0（Windows；U；Windows NT 6.1；en-US）AppleWebKit/533.16（KHTML，像Gecko）从外观上看，版本/5.0 Safari/533.16只是代表counter.com传递的坏用户代理。