Question

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

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

有什么用？

EM
PX
％

表示宽度和高度。

EDIT1

缩小

Answer 1

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

<强>值

xx-small，x-small，small，medium，large，x-large，xx-large

基于用户默认字体大小（中等）的一组绝对大小关键字。类似于表示HTML的用户默认字体大小。

更大，更小

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

<强>长度

正长度。当在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 =所需元素像素值/父元素字体大小（以像素为单位）   例如，假设页面正文的字体大小设置为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，16px = 1.6em。例如：

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

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

Answer 2

由于不一致，主要内容区域的百分比（％）宽度的网站不建议。对于整个网站，最好使用大约960像素的像素宽度，这样可以适用于所有分辨率。

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

总结：

最好使用wrap 960px %的固定宽度父级，并在wrap内使用流量（<div class="wrap">  </div>）元素宽度。

示例代码：

要开始使用，您可以使用以下示例代码：

HTML：

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

CSS：

{{1}}

有关详细信息，请查看有关程序员的问题：https://softwareengineering.stackexchange.com/questions/135506/percent-or-pixels-html-css

css不同的分辨率em或px

2 个答案:

总结：

示例代码：

HTML：

CSS：