css 不同的分辨率 em 或 px

Question

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

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

要用什么？

1. 他们
2. 像素
3. %

宽度和高度。

编辑1

缩小之后

Answer 1

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

值(value)观

xx-small, x-small, small, medium, large, x-large, xx-large

A set of absolute size keywords based on the user's default font size (which is medium). Similar to presentational HTML's through where the user's default font size is .

更大，更小

Larger or smaller than the parent element's font size, by roughly the ratio used to separate the absolute size keywords above.

长度

A positive length. When the units are specified in em or ex, the size is defined relative to the size of the font on the parent element of the element in question. For example, 0.5em is half the font size of the parent of the current element.

百分比

A positive percentage of the parent element's font size.

It is best to avoid using values that are not relative to the user's default font size, such as lengths with units other than em or ex. However, if such values must be used, px are preferred over other units because their meaning does not vary depending on what the operating system thinks (generally incorrectly) the resolution of the monitor is.

--- 可能的方法 ---

关键字

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

像素

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

Note: Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.

Em

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:

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

The em is a very useful unit in CSS, since it can adapt automatically to the font that the reader chooses to use.