2

我设计了一个网站。我是 css、html、php 的新手，所以在 css 中我使用了 px 中的所有尺寸。但是当我更改屏幕分辨率时，网页内容不正确，意思是：

当我缩小这是结果如何在 css 中处理这个？当我用谷歌搜索时，我发现我应该使用 em / % 而不是使用 px。

要使用什么？

  1. 时间
  2. 像素
  3. %

对于宽度和高度。

编辑1

缩小后

4

2 回答 2

4

font-size: font-size CSS 属性指定字体的大小。反过来，字体大小可能会改变其他项目的大小，因为它用于计算 em 和 ex 长度单位的值。

价值观

xx 小，x 小，小，中，大，x 大，xx 大

一组基于用户默认字体大小（中等）的绝对大小关键字。与用户默认字体大小为 .

更大，更小

大于或小于父元素的字体大小，大致为用于分隔上述绝对大小关键字的比率。

长度

正长度。当单位以 em 或 ex 指定时，大小是相对于相关元素的父元素上的字体大小定义的。例如，0.5em 是当前元素父级字体大小的一半。

百分比

父元素字体大小的正百分比。

最好避免使用与用户默认字体大小无关的值，例如单位不是 em 或 ex 的长度。但是，如果必须使用此类值，则 px 优于其他单位，因为它们的含义不会因操作系统认为（通常是错误的）显示器分辨率而异。

--- 可能的方法 ---

关键词

关键字是设置网络字体大小的好方法。通过在 body 元素上设置关键字字体大小，您可以在页面上的其他位置设置相对字体大小，使您能够轻松地在整个页面上相应地放大或缩小字体。

像素

当您需要像素精度时，以像素值 (px) 为单位设置字体大小是一个不错的选择。px 值是静态的。这是一种独立于操作系统和跨浏览器的方式，它实际上告诉浏览器以您指定的高度像素数精确呈现字母。不同浏览器的结果可能略有不同，因为它们可能使用不同的算法来实现类似的效果。

字体大小设置也可以组合使用。例如，如果父元素设置为 16px，而其子元素设置为更大，则子元素在页面中的显示大于父元素。

注意：无法以像素为单位定义字体大小，因为用户无法从浏览器更改字体大小。（例如，视力有限的用户可能希望将字体大小设置为远大于网页设计师选择的大小。）因此，如果您希望创建包容性设计，请避免使用像素作为字体大小。

EMS

另一种设置字体大小的方法是使用 em 值。em 值的大小是动态的。定义 font-size 属性时，em 等于应用于相关元素父级的字体大小。如果你没有在页面的任何地方设置字体大小，那么它是浏览器默认的，大概是 16px。因此，默认情况下 1em = 16px，而 2em = 32px。如果你在 body 元素上设置了 20px 的字体大小，那么 1em = 20px 和 2em = 40px。请注意，值 2 本质上是当前 em 大小的乘数。

为了计算所需任何像素值的 em 等效值，您可以使用以下公式：

em = 想要的元素像素值/父元素font-size，单位为像素例如，假设页面body的font-size设置为1em，浏览器标准为1em = 16px；如果你想要的字体大小是 12px，那么你应该指定 0.75em（因为 12/16 = 0.75）。同样，如果你想要一个10px的字体大小，那么指定0.625em（10/16 = 0.625）；对于 22px，指定 1.375em (22/16)。

在整个文档中使用的一种流行技术是将正文的字体大小设置为 62.5%（即默认 16px 的 62.5%），相当于 10px 或 0.625em。现在，您可以使用 em 单位设置任何元素的字体大小，通过将 px 值除以 10 进行易于记忆的转换。这样 6px = 0.6em、8px = 0.8em、12px = 1.2em、14px = 1.4em，16 像素 = 1.6em。例如：

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.6em; /* 1.6em = 16px */
}

em 是 CSS 中非常有用的单位，因为它可以自动适应读者选择使用的字体。

于 2012-08-03T05:21:11.417 回答
2

由于不一致，不建议网站具有主要内容区域的百分比 (%)宽度。对于整个网站，最好使用大约 960 像素的像素宽度，可能会更小一些，这样它就适用于所有分辨率。

至于主要内容区域内的元素，最好使用百分比宽度，因为计算精确的像素值对两者都没有意义。结果设置为固定，因为它是父级固定宽度的百分比，而不是显示器的分辨率，这在用户之间有所不同。

总结一下：

最好使用带有 a 的固定宽度父wrap元素，并960px在.%wrap

示例代码：

首先，您可以使用以下示例代码：

HTML：

<div class="wrap">
    <!-- Other Elements -->
</div>

CSS：

.wrap {margin: 0px auto; width: 960px;}

有关更多信息，请查看 Programmers 上的这个问题：https ://softwareengineering.stackexchange.com/questions/135506/percent-or-pixels-html-css

于 2012-08-03T05:14:13.257 回答