Question

每个网站都有元素，必须设置它们的宽度和高度。这是我的问题我们如何设置宽度和高度，使网站在不同宽度/高度的不同显示器上正常工作？是px首选%？什么时候我们应该px什么时候应该使用％？每个人的优点和缺点是什么？

Answer 1

如果要指定固定/静态高度（以像素为单位），请使用px。％表示父元素的总百分比。使用百分比意味着当浏览器调整大小时，网站将使用它不会使用的像素进行调整。

你选择哪一个真的取决于你想要达到的外观和感觉。

Answer 2

这完全取决于您网站的类型以及您希望如何响应各种屏幕分辨率。

仅使用% and px是不够的，还有其他单位用于文字大小，例如em and pt等。

我们还有media queries

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

http://www.htmlgoodies.com/html5/client/common-techniques-in-responsive-web-design.html#fbid=YIeEpYZXBt-

相关SO问题Responsive Layout - PX, EM, or %?

Answer 3

这一切都取决于你计划做什么样的网络。

许多网页使用像素的固定宽度的容器（如960px）。如果你在photoshop，illustrator，indesign等上进行精心设计的预设计来处理像素，那将非常容易。这些网站虽然在PC屏幕外不能很好地工作，就好像你的窗口宽度小于容器，除非水平滚动，否则内容将不会显示。

现在，如果你想让你的内容调整到任何水平宽度，你应该使用％，但是这很困难，你需要清楚地知道在开始工作之前你想要在每个可能的宽度上展示什么。

如果您决定采用“响应式”设计......工作会更难。我建议你使用类似的东西：

@media screen and  (min-width:600px) {}
@media screen and  (min-width:800px) {}
@media screen and (min-width:1024px) {}
@media screen and (min-width:1524px) {}

在你的CSS中为每个宽度（或平台）调整你的类所需的内容。（还有许多其他有用的@medias

设置元素宽度和高度的最佳方法是什么？

3 个答案: